Web development and performance
What is font-display?
font-display is a CSS descriptor controlling what a browser shows while a web font loads. The choice is between invisible text (FOIT) and a visible fallback that swaps (FOUT), and the practical default is swap with a metric-matched fallback.
Also called: FOIT · FOUT · font loading
The values that matter
- swap
- Show the fallback immediately, swap when the web font arrives. Best for body text.
- optional
- Use the web font only if it arrives almost immediately. Best for anything non-essential.
- block
- Hide text briefly, then fall back. Produces invisible text and is rarely the right answer.
Why swap alone is not enough
Swapping to a font with different metrics reflows the text, which is measured as layout shift. Declaring size-adjust and the ascent and descent overrides on the fallback makes the swap almost imperceptible and keeps CLS near zero.
The bigger win
Self-host fonts and subset them to the characters you actually use. A latin subset of one weight is a fraction of the full family, and self-hosting removes a third-party connection from the critical path entirely.
Where this is covered in depth
A definition can only go so far. Core Web Vitals, and the order that actually reduces them covers this properly — 3 minutes, free, no email required.
Who wrote this
Anas Bin Masud builds e-commerce sites and does technical SEO for businesses in the UK, Canada and Pakistan. These definitions come from client work rather than from a content brief — where an entry describes a mistake, it is usually one found on a real site. More about how I work.