Unoptimized web font usage
- Fonts
Problem Summary
Web fonts (Google Fonts, custom web fonts) often cause render blocking or flash of invisible text (FOIT) when not optimized. Large font files, missing subsets, and improper loading cause delays in text visibility.
Performance Impact
- Render blocking: Font files block page render until loaded
- FOIT/FOUT: Flash of invisible/unstyled text
- Large downloads: Unsubsetted fonts can be 500KB+
- Layout shifts: Font swapping causes CLS when not properly sized
How to Detect
- PageSpeed Insights: Flags “Ensure text remains visible during webfont load”
- Lighthouse: Shows font-display swap warning
- Chrome DevTools Network: Font load timing in waterfall
- WebPageTest: Shows render blocking fonts
Solutions
1. Use font-display: swap
@font-face { font-family: 'MyFont'; src: url('/fonts/myfont.woff2') format('woff2'); font-display: swap;}2. Preload Critical Fonts
<link rel="preload" href="https://adame.io/fonts/myfont.woff2" as="font" type="font/woff2" crossorigin>3. Subset Fonts
Remove unused glyphs using tools like glyphhanger or Fonttools.
4. Use WOFF2 Only (for modern browsers)
src: url('font.woff2') format('woff2');5. Self-Host Google Fonts
// Instead of Google Fonts CDN// Download and host locally