font-display explained: swap, optional, fallback and block

Quick answer: use font-display: swap for most text so it shows right away in a fallback font, and add a fallback with matching metrics to avoid layout shift. Use optional if you would rather skip the font than risk a visible swap.

What font-display does

It tells the browser what to show while a web font is still downloading.

• block: invisible text for a short period, then the font. Can cause a flash of invisible text.
• swap: shows the fallback font immediately and swaps when the web font arrives.
• fallback: a very short invisible period, then a fallback, and swaps only if the font arrives quickly.
• optional: like fallback, but the browser may never swap, and decides based on connection speed.
• auto: leaves the choice to the browser, which usually behaves like block.

The @font-face generator adds the value you pick.

The layout shift problem

When a swap happens, the new font usually has different letter widths and line heights, so text reflows and content jumps. That counts against Cumulative Layout Shift.

Fix it with a tuned fallback

Define a local fallback font and adjust it with size-adjust, ascent-override, descent-override and line-gap-override until it matches the web font's metrics. Then the swap barely moves anything. The fallback font matcher calculates the numbers for you.

Other quick wins

• Serve WOFF2. It is the smallest format and supported by all current browsers.
• Preload the one or two fonts used above the fold, with crossorigin set.
• Self-host so you avoid an extra connection to another domain.
• Load only the weights and character sets you use.

Which value should you pick?

Body text: swap with a matched fallback. Decorative fonts that the page can live without: optional. Icon fonts: block, since a fallback letter in place of an icon looks broken.