Font Loading Strategy

Problem

Text remains invisible for seconds while custom fonts download, leaving users staring at blank pages. Font swaps cause jarring layout shifts mid-read as text suddenly changes size. Slow font loading blocks all text rendering, making content inaccessible. Flash of unstyled text disrupts the visual experience as fonts load inconsistently.

Solution

Control how fonts load and render to prevent invisible text or layout shifts. This balances performance with user experience by choosing when to show fallback fonts versus waiting for custom ones.

Example

This example demonstrates using font-display: swap to show fallback fonts immediately while custom fonts load in the background.

@font-face {
  font-family: 'CustomFont';
  src: url('/fonts/custom.woff2') format('woff2');
  /* swap: Show fallback immediately, swap to custom font when loaded */
  font-display: swap;
}

Benefits

• Prevents invisible text by showing fallback fonts immediately while custom fonts load.
• Improves perceived performance by making content readable without waiting for font downloads.
• Reduces layout shift by choosing font-display strategies that minimize visual disruption.
• Gives developers control over the tradeoff between visual consistency and content accessibility.

Tradeoffs

• Font swap can cause jarring visual changes when custom fonts finally load.
• Requires careful fallback font selection to minimize layout shift when fonts swap.
• Some strategies (like block) can still hide text for several seconds.
• Preloading fonts adds extra requests and can delay other critical resources.