Optimise web font loading

Prevent invisible or mismatched text while fonts load by preloading and using font-display.

What it means

When a browser encounters a custom font, it can either show invisible text (FOIT — Flash of Invisible Text) or show the fallback font first and swap when the custom font arrives (FOUT — Flash of Unstyled Text). By default, most browsers choose FOIT, which makes text disappear for up to 3 seconds on slow connections.

Why it matters

Font loading directly impacts LCP and CLS. Invisible text delays LCP. A font swap that shifts layout increments CLS. Both are Core Web Vitals that Google measures in ranking. Optimised font loading can improve your Lighthouse performance score by 5–15 points.

How to fix it

  1. Add font-display: swap to every @font-face rule so the browser shows fallback text immediately instead of hiding it.
  2. Preload your most important font files: <link rel="preload" href="/fonts/your-font.woff2" as="font" type="font/woff2" crossorigin>
  3. Self-host fonts instead of loading from Google Fonts — this removes one external DNS lookup and connection. Use google-webfonts-helper.herokuapp.com to download the files.
  4. Only load the font weights and styles you actually use — every unused variant is a wasted download.
  5. Use a system font stack as your fallback and tweak its metrics (size-adjust, ascent-override, descent-override) to minimise layout shift when your custom font swaps in.
  6. Subset your fonts to only the characters used on the page using pyftsubset or a build tool — this can cut font file size by 50–80%.

Helpful tools

Related guides