Unsure what the correct approach to using local fonts on a NextJS 14 app is (using app router not pages) but I've tried to use a custom-made local font in a Woff and Woff2 format. Per the Chakra UI option using @font-face there is:
import { Global } from '@emotion/react'
const Fonts = () => (
<Global
styles={`
@font-face {
font-family: 'Heading Font Name';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('./fonts/custom.woff2') format('woff2'), url('./fonts/custom.woff') format('woff');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
`}
/>
)
export default Fonts
and per research on this subject, I found "How to use self-hosted fonts face using NextJS?" which I implemented the Head solution of:
const RootLayout = ({children}: RootLayoutProps) => {
return (
<html lang="en">
<Head>
<link
rel="preload"
href="/fonts/custom-font.woff2"
as="font"
type="font/woff2"
crossOrigin="anonymous"
/>
</Head>
<body>
<Providers>{children}</Providers>
</body>
</html>
)
}
export default RootLayout
but I get the warning:
Warning: You're using
next/headinside theappdirectory, please migrate to the Metadata API. See https://nextjs.org/docs/app/building-your-application/upgrading/app-router-migration#step-3-migrating-nexthead for more details.
there is nothing mentioned in the directed warning link regarding the correct approach to load local fonts with the Metadata API without Tailwind (Local Fonts). Research on the topic mentioned solutions for TailWind but I have an entire design system developed in Chakra.
- Font Optimization
- How to add custom local fonts to a Nextjs 13 Tailwind project?
- How to use self-hosted fonts face using NextJS?
- Local font not loading in NextJs
- Use Local Font in Next.js
With NextJS 14 and Chakra, what is the correct way to load a local Woff2 font?