Font Performance Strategies
summary
Practical, measurable steps: self‑host fonts where possible or accept Google Fonts for convenience, convert to WF2 and consider variable fonts, then slice and subset with tools like WhatCanMyFontDo, Slice and Glyphhanger to cut files (example: 90% reduction on one site, 61% page weight drop, LCP down 33%). Use CSS size‑adjust or font‑size‑adjust to eliminate CLS, prefer font‑display: optional for performance or swap/block selectively, and preload/preconnect cautiously while caching fonts long‑term.
AI-written summary · about
chapters (9)
- 0:00Introduction
- 7:14Self-hosting vs third-party
- 10:02Variable fonts
- 13:32Minimizing font sizes
- 25:39Incremental transfer and subsetting
- 26:20Font-display options
- 32:00Eliminating layout shift
- 39:50Font loading strategies
- 47:15Summary and Q&A
