How to avoid FOUC / FOUT in Next.js 14?

[lancejpollard]

Summary

I have FOUT/FOUC in my app every now and then when it doesn't use the cache for some reason. Notice how after a few hard refreshes on my local env, there is a quick FOUT in there every few tries.

How can this be avoided? What are the key techniques?

Additional information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 23.2.0: Wed Nov 15 21:54:51 PST 2023; root:xnu-10002.61.3~2/RELEASE_ARM64_T6030
  Available memory (MB): 36864
  Available CPU cores: 12
Binaries:
  Node: 20.10.0
  npm: 10.4.0
  Yarn: 1.22.19
  pnpm: 8.15.2
Relevant Packages:
  next: 14.1.2-canary.1
  eslint-config-next: 13.1.5
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 5.3.3

Example

No response

[JS-GitRepo]

I'm having the same issue; did you ever find a solution / answer to this outside of this discussion?

[lancejpollard]

Unfortunately, I basically built a complicated <Text> component which waits for each dependent font to be loaded using fontfaceobserver or something like that from what I recall. It makes the <Text/> default to opacity: 0, then fades in to opacity: 1 once font is loaded.

Could make it show a gradient box animated, which I do for long-loading fonts like Chinese, but for Latin fonts they are small enough to just be blank and fade in when ready.

Less than ideal for sure, but fade-in animation looks nice.

[victormoni]

Hi @lancejpollard

Avoiding FOUT/FOUC in Next.js 14

Issue:
FOUT (Flash of Unstyled Text) or FOUC (Flash of Unstyled Content) happens when your fonts or styles are applied after the initial paint, often due to how the browser loads fonts and CSS in hydration or after a hard refresh.

Key Solutions:

1. Use next/font for self-hosted fonts

• Next.js 13+ introduced next/font which inlines font CSS and avoids layout shifts by preloading and injecting fonts during SSR.
• Example:

  import { Inter } from 'next/font/google'
  const inter = Inter({ subsets: ['latin'], display: 'swap' })
  export default function Page() {
    return <p className={inter.className}>Hello World</p>
  }

• display: 'swap' ensures text is visible immediately with fallback font until the custom font loads.

2. Preload critical fonts in _document.tsx

• For custom/local fonts not using next/font, preload them:

  <link
    rel="preload"
    href="/fonts/MyFont.woff2"
    as="font"
    type="font/woff2"
    crossOrigin="anonymous"
  />

3. Leverage static asset caching

• Make sure fonts are served with long-lived cache headers (Cache-Control: public, max-age=31536000, immutable).
• This prevents repeated FOUT on subsequent visits.

4. Avoid late CSS injection

• If using CSS-in-JS, ensure critical styles are SSR (e.g., with styled-components use ServerStyleSheet in _document.tsx).
• Late-injected CSS forces a repaint.

5. Use a proper fallback font stack

• Choose a system font fallback with similar metrics to your custom font to reduce noticeable shifts.

---

References:

• Next.js Fonts Documentation: https://nextjs.org/docs/app/building-your-application/optimizing/fonts
• MDN on FOUT: https://developer.mozilla.org/en-US/docs/Glossary/FOUT
• Web.dev font loading best practices: https://web.dev/optimize-webfont-loading/

[lancejpollard]

Hi @victormoni, thanks for your response!

I have a multi-lingual website, which requires basically every language's script/font. So I can't hardcode this:

import { Inter } from 'next/font/google'

That is way too much to load for 100+ fonts. Would really like a remoteFont equivalent or something.

Any suggestions for this use case?

Or better yet, how might you rebuild FontSquirrel (a font preview site, with live font preview, not static cached font glyph images), which could have thousands or even millions of fonts?

[victormoni]

@lancejpollard you're welcome

Handling Fonts for Multi-Lingual Sites in Next.js Without Hardcoding

If your website needs to support many language scripts (100+ fonts), hardcoding with next/font/google isn't practical. Instead, you can:

1. Use a CDN-based font loader

Load fonts dynamically from a service like Google Fonts, Adobe Fonts, or Bunny Fonts, specifying only the subsets needed per request:

<link
  rel="stylesheet"
  href="https://fonts.googleapis.com/css2?family=Noto+Sans&display=swap&subset=latin,cyrillic,devanagari"
/>

You can conditionally generate the subset query based on the user's language.

2. Dynamic imports based on locale

If using Next.js getServerSideProps or middleware, detect the user's locale and inject the proper font link into the head before rendering:

export async function getServerSideProps({ locale }) {
  const subsetMap = {
    en: 'latin',
    ru: 'cyrillic',
    hi: 'devanagari'
  };
  return {
    props: { fontSubset: subsetMap[locale] || 'latin' }
  };
}

3. Use system font fallbacks

For rare scripts, rely on OS-installed system fonts to avoid loading external fonts unless necessary. This drastically reduces initial load times.

4. Self-host a multi-script font family

Fonts like Noto Sans cover many scripts in one family. Host it locally, split into script-specific files, and load them on demand.

---

References:

• Google Fonts Subsets: https://developers.google.com/fonts/docs/getting_started#specifying_script_subsets
• MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face
• Web.dev font loading best practices: https://web.dev/optimize-webfont-loading/