The flash problem
Custom fonts download as separate files. Until they arrive, the browser must decide what to show. Two flashes are possible.
- FOIT (Flash of Invisible Text): text is hidden until the font loads, leaving a blank gap.
- FOUT (Flash of Unstyled Text): a fallback font shows first, then swaps when the custom font arrives.
The font display descriptor
The CSS font display property in font face controls this behavior.
- swap shows fallback immediately and swaps in the custom font, favoring readability.
- block hides text briefly, risking FOIT but avoiding a swap jump.
- optional uses the custom font only if it loads almost instantly, otherwise keeps the fallback.
Speeding things up
- Preload the critical font file so the browser fetches it early.
- Subset fonts to the characters you actually use to shrink the file.
- Match the fallback metrics with size adjust to reduce layout shift on swap.
Key idea
Font loading strategy uses font display, preload, and subsetting to balance fast visible text against jarring font swaps.