Web Font Optimization Guide: Balancing Design and Performance
Web fonts enhance brand identity but font files are often large. Chinese fonts can be 5-10MB. Unoptimized fonts cause FOIT or FOUT, impacting Core Web Vitals LCP by 15-20%.
1. Font Display Strategies
| Value | Behavior | Best For |
|---|---|---|
| auto | Browser default (FOIT) | General |
| block | Brief blocking (~3s) | Critical brand fonts |
| swap | Show fallback, swap when loaded | Most cases (recommended) |
| fallback | Brief block, then permanent fallback if timeout | Balance |
| optional | Very short block, cancel if timeout | Maximum performance |
@font-face { font-family: 'MyFont'; src: url('/fonts/myfont.woff2') format('woff2'); font-display: swap; }
2. Optimization Strategies
Font Subsetting (Critical for Chinese)
Remove unused characters. Chinese font files typically contain 20,000+ chars but a site uses under 2,000. Subsetting reduces file size by 90%+.
Preload Critical Fonts
<link rel="preload" href="/fonts/main.woff2" as="font" type="font/woff2" crossorigin>
Self-Host vs Third-Party
Self-hosting removes DNS lookups and extra connections.
3. Best Practices
- FOUT is better than FOIT (users prefer system fonts over blank space)
- Limit font weights (each weight = extra download)
- Use variable fonts (one file, multiple weights)
- Long cache duration (1 year+) for font files
- Use WOFF2 format (best compression, widely supported)
4. Summary
Start with basics: WOFF2, font-display: swap, preload critical fonts. For Chinese sites, subsetting is essential.