font-display

font-display is a CSS descriptor used inside @font-face rules to control exactly how a browser handles font loading — specifically, what to show users while a web font is downloading. It's one of the most impactful single properties for web typography performance and a key lever for improving Core Web Vitals scores.

The descriptor accepts five values, each representing a different strategy along the spectrum from "show nothing" to "always show something":

@font-face {
  font-family: 'Nunito';
  src: url('/fonts/nunito.woff2') format('woff2');
  font-display: swap; /* Most common choice for body text */
}

The five values:

/* block — invisible text for ~3s, then swap (FOIT) */
font-display: block;

/* swap — show fallback immediately, swap when ready (FOUT) */
font-display: swap;

/* fallback — ~100ms invisible, then fallback, swap if font arrives quickly */
font-display: fallback;

/* optional — ~100ms invisible, then fallback, no swap (font cached for next visit) */
font-display: optional;

/* auto — browser decides (usually same as block) */
font-display: auto;

font-display: swap is the Google Fonts default and the right choice for most body text. It eliminates invisible text (FOIT) by immediately rendering a fallback font, then swapping when the web font arrives. The trade-off is a visible style change — manageable with fallback font metric adjustments.

font-display: optional is the most performance-friendly option. The browser shows the fallback if the font isn't available within a very short window, and never performs a late swap — eliminating CLS entirely. The font downloads silently in the background and is used on subsequent page loads once cached. This is ideal for non-critical decorative fonts.

font-display: fallback splits the difference: a tiny invisible window (~100ms, imperceptible to users), then a fallback font, with a swap only if the font arrives within a reasonable time window (typically 3 seconds). It's a good choice when you want to avoid both long invisible periods and very late jarring swaps.

When using Google Fonts via their CDN URL, you can enable swap with a simple parameter:

<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">

For self-hosted fonts with performance budgets, optional combined with preloading gives the best LCP and zero CLS:

@font-face {
  font-family: 'Source Sans 3';
  src: url('/fonts/source-sans-3.woff2') format('woff2');
  font-display: optional;
}

Understanding font-display is fundamental to any serious web font performance strategy. It directly affects three user experience dimensions: when text first appears, whether layout shifts occur, and how consistent the visual experience feels across connection speeds.