Disable fallback font | Next.js | Page 1

Hi @chilly blade. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

Yes, it is possible to disable the fallback font entirely in Next.js. You can do this by setting the adjustFontFallback property to false in your font configuration. This property is used to set whether an automatic fallback font should be used to reduce Cumulative Layout Shift (CLS). By default, it is set to true for next/font/google and 'Arial' for next/font/local.

Here is an example of how to disable the fallback font for a Google font:

export const notoSansArabic = Noto_Sans_Arabic({
  subsets: ['arabic'],
  display: 'swap',
  adjustFontFallback: false, // 👈
})

Please note that disabling the fallback font might increase your Cumulative Layout Shift (CLS), which is a vital web vital metric. So, use this option carefully.

For more information, you can refer to the Next.js documentation (https://nextjs.org/docs/app/api-reference/components/font).

Sources:

Github Issue (closed): Custom font fallbacks are not allowed with next/font/google > Comments (https://github.com/vercel/next.js/issues/53024)
Next.js > Docs > App > Api-reference > Components > Font Module > adjustFontFallback (https://nextjs.org/docs/app/api-reference/components/font)
Next.js > Docs > Pages > Api-reference > Components > Font Module > adjustFontFallback (https://nextjs.org/docs/pages/api-reference/components/font)
Github Issue (closed): Cannot use 2 font families > Comments (https://github.com/vercel/next.js/issues/44825)

#Disable fallback font

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: