Web Font Loading Performance Budget
Set performance budgets for web fonts including total font weight, number of font files, and loading strategies. Track font size impact on CLS, FCP, and LCP with optimization techniques.
Detailed Explanation
Web Font Performance Budgets
Web fonts enhance visual design but carry significant performance costs. Fonts are render-blocking by default in many browsers — text remains invisible (FOIT) or flashes unstyled (FOUT) until fonts load.
Font Budget Recommendations
| Scenario | Font Budget | Max Files |
|---|---|---|
| Minimal (1 font) | 20-30 KB | 2 |
| Standard (2 fonts) | 40-60 KB | 4 |
| Rich typography | 60-100 KB | 6 |
Font Format Efficiency
| Format | Compression | Browser Support |
|---|---|---|
| WOFF2 | Best | 96%+ |
| WOFF | Good | 99%+ |
| TTF/OTF | None | 99%+ |
Always use WOFF2 as the primary format. A font file in WOFF2 is typically 30-50% smaller than the same font in WOFF.
Subsetting for Budget Compliance
Full character sets include thousands of glyphs. Subsetting keeps only the characters you use:
- Latin only — Reduces a 200 KB font to ~20 KB
- Latin + extended — ~30 KB
- Latin + Cyrillic — ~40 KB
Use tools like glyphhanger or fonttools to generate subsets.
Font Loading Strategies
font-display: swap — Shows fallback immediately, swaps when font loads (prevents FOIT, may cause CLS)
font-display: optional — Uses font only if already cached, otherwise uses fallback (best for performance)
Preloading critical fonts:
<link rel="preload" href="/fonts/main.woff2" as="font" type="font/woff2" crossorigin>
Tracking Fonts in the Budget Tracker
Add each font file as a separate resource entry with type "Font":
inter-regular.woff2— 22 KBinter-bold.woff2— 23 KBjetbrains-mono-regular.woff2— 18 KB
Variable Fonts
A single variable font file can replace multiple weight/style files:
- 4 separate files: 4 x 25 KB = 100 KB
- 1 variable font: 45-60 KB
Variable fonts are almost always more budget-efficient when you need 3+ weights or styles.
Use Case
Font budget tracking prevents a common performance pitfall: designers specify multiple font families and weights that collectively weigh 500+ KB. By setting a font budget in the tracker and adding each font file as an entry, the team sees the cumulative impact and can make informed tradeoffs between typography quality and load speed.