The correct playbook for custom web fonts: self-host WOFF2, subset with unicode-range, preload the critical face, pick font-display deliberately, and metric-match fallbacks to eliminate layout shift. Includes a copy-ready recipe, font-display decision table, anti-pattern list, and 6-point audit checklist. Covers variable fonts, the CSS Font Loading API, Early Hints, and non-Latin/RTL scripts.
Key Features
01Works with Claude Code, Cursor & any Agent-SDK harness out of the box
02Progressive disclosure — loads only when a font task triggers, zero context bloat
03Copy-ready @font-face recipe + preload snippet, paste and ship
044 deep-dive references load on demand (hosting, pipeline, CLS, i18n/subsetting)
05Framework-agnostic — plain HTML/CSS, no build step, no dependencies
06Built-in 6-point audit checklist + anti-pattern list for instant review
Use Cases
01Fix fonts hurting LCP / slow first paint
02Eliminate font-driven layout shift (CLS)
03Migrate off Google/Adobe Fonts to self-hosted (GDPR)
04Audit / clean up existing @font-face setup
05Replace icon fonts with inline SVG
06Serve non-Latin / RTL scripts and locale subsets
Reviews
There are no reviews yet.