Hosting Fonts? Good Luck!
summary
Self-hosting font files increases measured page speed, removes a single point of failure and avoids third‑party privacy leaks; Google Fonts loads CSS from fonts.googleapis.com then font binaries from fonts.gstatic.com, uses unicode‑range subsets and font‑display:swap which can cause FOIT/FOUT. Recommended steps: download and serve WOFF2, subset glyphs by unicode‑range, strip hints for Mac, or generate UA‑specific subsets on the backend and cache them; prefer variable fonts when using multiple styles, implement progressive font enrichment, preload only non‑local fonts, and inline a minimal base64 base font then lazy‑load full files with the Font Loading API.
AI-written summary · about
chapters (9)
- 0:00Introduction to self-hosting
- 2:32Google Fonts drawbacks
- 8:15Self-hosting font basics
- 10:00Optimizing font files
- 13:27Browser and platform differences
- 15:56Variable fonts explained
- 18:43Progressive font enrichment
- 20:29Preloading font files
- 23:00Summary and conclusion
