Font loading strategies that reduce layout shift
Short answer: Reserve space for text while fonts load—use `font-display` thoughtfully and limit font families/weights.
NZ mobile users on commuter trains notice when headings jump as webfonts swap in—that shift hurts CLS and readability.
Strategies
- Subset fonts to characters you need where possible.
- Prefer system font stacks for body text if brand allows.
- Preload only critical fonts—not an entire library.
FOIT vs FOUT trade-offs
`font-display: swap` reduces invisible text but can shift; pair with size-adjust or careful line heights where supported.
Audit
Disable webfonts temporarily on staging—if layout stabilises dramatically, your loading strategy needs work.
Frequently asked questions
Are variable fonts worth it?
They can reduce files if you need many weights—test rendering across browsers.
Do icon fonts still make sense?
Often replaced by SVG sprites—icon fonts can block text rendering if mishandled.