How to Optimize Web Fonts for Performance

· Category: Web Performance

Short answer

Web fonts can block rendering and cause layout shifts. Optimizing them involves choosing efficient formats, limiting subsets, and controlling loading behavior.

Steps

  1. Use modern formats like WOFF2 for the best compression.
  2. Subset fonts to include only the characters your site needs.
  3. Add font-display: swap to show fallback text immediately.
  4. Preload critical fonts with <link rel="preload" as="font">.
  5. Self-host fonts instead of relying on external services when possible.

Tips

  • Use the size-adjust descriptor to reduce layout shift when fonts swap.
  • Limit the number of font families and weights to reduce requests.
  • Variable fonts combine multiple weights into a single file.

Common issues

  • Flash of Invisible Text (FOIT) occurs when font-display is omitted.
  • Third-party font services add DNS and connection overhead.