font-loading-and-performancelisted
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