Skip to main content

Font Optimization

Fonts can delay text rendering and cause layout shift if fallback metrics differ. The goal is: fewer fonts, local delivery, predictable behavior.

Step 1: Simplify Typography​

  • Use 1 family (or 2 at most).
  • Use as few weights as possible.
  • Prefer a variable font when it replaces multiple static weights.

Step 2: Serve Fonts Locally​

Self-hosted fonts avoid extra DNS/TLS overhead and give you better cache control.

tip

If you cannot self-host, at least preconnect to the font origin and keep the font list small.

Step 3: Ensure "Swap" Behavior​

Your @font-face rules should use font-display: swap so text renders even if the font is still loading.

@font-face with swap
@font-face {
  font-family: "YourFont";
  src: url("/fonts/yourfont.woff2") format("woff2");
  font-display: swap;
}

Step 4: Preload Only the Critical Fonts​

Preload the font files actually used above the fold (often regular + bold).

Preload a critical font
<link rel="preload" href="/fonts/yourfont-regular.woff2" as="font" type="font/woff2" crossorigin>
caution

Do not preload every font weight. Over-preloading can slow down LCP by competing with images and CSS.

Avoid CLS from Fonts​

  • Choose a fallback font with similar metrics.
  • Keep line-height consistent.

Verification​

  • DevTools Network -> Font: fonts load from your domain (or intended origin).
  • Lighthouse/PSI: no "Ensure text remains visible" issues.
  • No new CLS during first render.

Checklist​

  • Font families/weights reduced.
  • Fonts served locally (or font origins are intentional).
  • font-display: swap in place.
  • Only critical fonts preloaded.
  • No new CLS regressions.

What's Next​