← ClaudeAtlas

font-loading-and-performancelisted

Use when shipping webfonts — choosing formats, subsetting, preloading, setting font-display, eliminating FOUT/FOIT, or fixing layout shift (CLS) caused by font swap. Also use when fonts are slow, text is invisible on load, the page jumps when fonts arrive, or Core Web Vitals flag font-related shift.
jpoindexter/typography-skills · ★ 1 · AI & Automation · score 69
Install: claude install-skill jpoindexter/typography-skills
# Font loading and performance Webfonts are render-blocking-adjacent resources that change text metrics when they arrive. Two separate problems: **when text becomes visible**, and **whether the page moves when the font swaps**. ⚠️ **Part of the corpus is obsolete here — but not all of it.** Rutter (2017) calls `font-display` "a nascent CSS property under development," supported only behind experimental flags at the time; that support status is obsolete — `font-display` now has universal support and is the standard mechanism. His five-value taxonomy and their descriptions (`auto`/`block`/`swap`/`fallback`/ `optional`), however, match the current spec closely and are still accurate — don't discard the substance along with the outdated adoption note. What's genuinely dead is the workaround the books reach for instead: the Font Loading API + `wf-loading`/`wf-active`/`wf-inactive` classes (Rutter) and Web Font Loader (both Rutter and Santa Maria) exist specifically to fake `font-display` behavior in browsers that don't support it. No browser needs that workaround now. Source-hierarchy rule 1 (browser behavior) outranks rules 4 and 8. Verify against MDN before emitting code. ## 1. When to invoke - Adding, replacing, or auditing webfonts. - FOIT (invisible text) or FOUT (unstyled flash) reported. - CLS regression traced to text. - Font payload is large, or you're choosing between static and variable files. - Self-hosting vs. a font CDN. ## 2. Required context - Which **familie