Font Loading Analysis
Analyse how fonts are loaded on your site and identify performance issues.
Font Loading Analysis
Custom fonts can significantly impact page load performance. LemWatch analyses your font loading strategy and flags issues.
What Gets Checked
- Total fonts loaded — Count of custom font files
- Font sources — Google Fonts, Adobe Fonts, or self-hosted
- font-display usage — Whether fonts use
font-display: swap to prevent invisible text
- Preloaded fonts — Whether critical fonts use
<link rel="preload">
- Estimated weight — Total download size of all font files in KB
Common Issues
Issue — Impact — Fix —
Missing font-display: swap — Invisible text during load (FOIT) — Add swap to @font-face —
Too many font files — Slow page load — Reduce to 2–3 font files —
No preloading — Fonts load late, causing layout shift — Preload critical fonts —
Large font files — Increased page weight — Use WOFF2 format, subset fonts —
Performance Score
Each font check gets a performance score (0–100):
- 90–100 — Excellent font loading strategy
- 70–89 — Minor improvements possible
- Below 70 — Font loading is hurting performance
Best Practices
- Use WOFF2 — Smallest format, supported by all modern browsers
- Limit font families — 2 families maximum (heading + body)
- Subset fonts — Only include characters you actually use
- Preload critical fonts — Add
<link rel="preload" as="font">
- Always use font-display: swap — Show fallback text immediately