Poor fallback fonts or no font-display
- Fonts
Problem Summary
Web fonts without proper fallback fonts or font-display setting cause flash of invisible text (FOIT) where text doesn’t appear until font loads. Poor fallbacks look bad during font loading.
Performance Impact
- FOIT: Invisible text until font loads
- Layout shifts: Fallback font differs in size
- Poor UX: Users can’t read during load
- Accessibility issues: Text invisible to screen readers temporarily
How to Detect
- Lighthouse: Flags font-display issues
- Chrome DevTools: Test with throttling
- WebPageTest: Shows font load timing
Solutions
1. Add font-display: swap
@font-face { font-family: 'MyFont'; src: url('font.woff2') format('woff2'); font-display: swap;}2. Better Fallback Fonts
font-family: 'MyFont', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;3. Size Adjust Fallbacks
@font-face { font-family: 'Fallback'; size-adjust: 90%; src: local('Arial');}4. Preload Critical Fonts
<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>