Fontastic web performance
summary
68% of websites use web fonts and Google Web Fonts reports ~17 trillion views; the real decisions are about bytes and behavior: prefer WOFF2 and subset by Unicode range to shrink files, use preload to fetch fonts early, and control rendering with FontFaceObserver or the CSS font-display: optional / swap settings to avoid multi-second invisible text (Chrome ~3s). variable fonts reduce multiple files to one and font-style-matter helps match fallbacks to minimize layout shift.
AI-written summary · about
chapters (21)
- 0:00Start
- 4:17Mitt Romney Web Font Problem
- 5:00Web Font Loading Problem
- 5:20Flash of Unstyled Text
- 7:20The Dirty Secret of Web Fonts
- 8:14Font Life Cycle
- 8:43Block Period
- 9:34Fallback Font
- 15:11Font File Versions
- 16:02Unicode Range
- 18:19Font Face Observer
- 21:14Place Swap
- 21:25Display Swap
- 24:50Font Style Matter
- 25:41Icon Fonts
- 25:53Ligatures
- 26:26Material Design Icon Font
- 28:02Font Files
- 28:37Variation Settings
- 29:09Decorations
- 30:18Resources
