Magically Optimising your fonts
summary
Describes an automated pipeline that downloads fonts locally, computes Font metric overrides and injects CSS so fallbacks match web fonts, reducing CLS to near‑zero in tested pages. Uses capsize metrics, a bundler‑agnostic plugin model and two libraries Fontaine and unifont (lookup across Google, Fontsource, Fontshare, Bunny, Adobe) and integrates into Nuxt Fonts. No runtime cost, serves files from the site for privacy, supports variable fonts and requires explicit checks for provider terms and extra weights.
AI-written summary · about
chapters (10)
- 0:00Introduction
- 1:45Web font challenges
- 5:38Core Web Vitals and font display
- 9:10Font optimization techniques
- 12:17Reducing layout shift
- 15:08Fontaine library
- 17:13Unifont management
- 19:20Next Fonts automation
- 22:10Next Fonts demo
- 25:46Q&A
