High Performance Web Fonts
summary
Self-host Google Fonts (or use Google Webfonts Helper) and add link rel=preload plus the CSS Font Loading API to force earlier downloads; that combination cuts idle network time and adds ~15% broader support and about 3 seconds off the font-critical path in Peter Müller’s tests. Generate aggressive subsets with tools like Cliffhanger or the automation subfont to reduce payloads and gain ~20% faster time-to-first-meaningful-paint, but use graceful superset fallback and avoid dynamic CMS pages—subsetting breaks kerning/ligatures and requires static builds.
AI-written summary · about
chapters (17)
- 0:00Start
- 3:06Add a Font
- 6:20Invisible Text
- 7:01Google Web Fonts Helper
- 8:22Pre Loading
- 8:45Resource Hints
- 9:21Css Font Loading Api
- 9:59Google Fonts with Self-Hosting
- 10:22Takeaways
- 10:52Hyper Optimization
- 11:33Sub Setting
- 13:17Aggressive Subsetting
- 14:45Graceful Superset Fallback
- 15:55Cliffhanger
- 18:56Sub Font
- 24:18Ligatures
- 26:22Variable Fonts
