Lesson 14 / 25
Font optimization
Load and render fonts efficiently to minimize impact on performance and FOUT/FOIT.
Font loading strategies
Use font-display: swap to show fallback instantly, swap when font loads. Preload critical fonts: <link rel=preload as=font href=font.woff2 type=font/woff2 crossorigin>. Avoid FOUT (Flash of Unstyled Text).
Font subsetting and variable fonts
Subset fonts to only needed characters (e.g., latin). Variable fonts combine multiple weights in one file. Reduce from 100KB to 30KB. Tools: google-webfonts-helper, FontTools.
Font delivery best practices
Use system fonts as primary fallback. Limit fonts to 2 per page, 2 weights each. Use WOFF2 format. Monitor impact on LCP. Fonts often contribute 100-200ms to load time.
Quick check
Quick check: What does font-display: swap do?
- Shows fallback text immediately, swaps font when loaded
- Hides text until font loads
- Disables font loading