CODEWITHSUNDEEP
next.jsnext.js14google-fonts
haskinator
haskinator

Reputation: 1

Issue with next fonts in dev mode

I created a font picker in my app using google fonts. I am importing fonts from 'next/font/google'. But I have an issue that sometimes the fonts are not loaded and they are replaced with fallback. It's super unpredictable, sometimes they all work, sometimes just subset of them, sometimes none.

I tried to clear my cache, restart the server, remove .next folder in my project, restart again. I still cannot get it working reliably in dev mode.

Anyone experienced similar issue?

Here is example of how I use them for reference (I am using tailwind)

..app/fonts.ts

export const merriweather = Merriweather({
  subsets: ['latin'],
  weight: ['400', '700', '900'],
  variable: '--merriweather',
  display: 'swap',
})

export const roboto = Roboto({
  subsets: ['latin'],
  weight: ['400', '700', '900'],
  variable: '--roboto',
  display: 'swap',
})

export const fonts = [merriweather, roboto]

..app/layout.tsx

export default function RootLayout({children}: Readonly<{
  children: React.ReactNode}>) {

  const fontVariables = fonts.map((font) => font.variable).join(' ')

  return (
     <html lang='en'>
      <body className={{fontVariables}}>
        {children}
        <Toaster />
      </body>
    </html>
  )
}

tailwind.config.ts

extend: {
      fontFamily: {
        merriweather: ['var(--merriweather)'],
        roboto: ['var(--roboto)']
      }

Upvotes: 0

Views: 65

Answers (0)

Related Questions