dragoon0x CANON · Font Loading
Fonts block rendering by default. Control the loading strategy or the browser controls it for you, badly.
font-display — always declare it
@font-face {
font-family: 'Geist';
src: url('geist.woff2') format('woff2');
font-display: swap;
}
| Value | Behavior | Use |
|---|---|---|
swap |
Show fallback immediately, swap when loaded | Default for body text |
optional |
Show fallback; use custom font only if already cached | Performance-critical pages |
block |
Invisible text for up to 3s | Never for body; acceptable for icon fonts |
fallback |
100ms invisible, then fallback, swap if loaded within 3s | Good middle ground |
font-display: swap is the CANON default. optional for ultra-fast pages.
Preload critical fonts
<link rel="preload" href="/fonts/geist-regular.woff2" as="font" type="font/woff2" crossorigin>
Preload only the critical weight (regular body text). Don't preload every weight — that defeats the purpose.
Limit font families and weights
| Budget | Reason |
|---|---|
| 1–2 font families | Visual consistency, reduced HTTP requests |
| 2–3 weights per family | Most UIs need regular + medium + bold at most |
| Total font files ≤ 4–6 | Each file is a blocking or swap-flashing resource |
Variable fonts reduce file count: one file covers all weights.
WOFF2 only
WOFF2 is supported by every modern browser and is 30% smaller than WOFF. Don't serve TTF, OTF, or WOFF to browsers — WOFF2 only (with WOFF fallback if you must support very old browsers).
Subsetting
If you only use Latin characters, subset the font to remove CJK, Cyrillic, etc. Tools: pyftsubset, Google Fonts &subset=latin, glyphhanger.
A full Noto Sans is 20MB. Latin-subset is 20KB. Subsetting matters.
Reducing FOUT (Flash of Unstyled Text)
- Match the fallback font's metrics to the custom font:
size-adjust,ascent-override,descent-override. - Tool:
fontainegenerates these values automatically.
@font-face {
font-family: 'Geist Fallback';
src: local('Arial');
size-adjust: 100.5%;
ascent-override: 96%;
descent-override: 24%;
}
Self-host vs CDN
Self-hosting is faster (same origin, no DNS lookup, no cross-origin overhead). Google Fonts is convenient but adds a DNS lookup + connection to fonts.gstatic.com.
Self-host when performance matters. Use Google Fonts for prototyping.
Anti-patterns
| Anti-pattern | Why it fails |
|---|---|
No font-display (defaults to auto → invisible text) |
FOIT for up to 3 seconds |
| Preloading 6 font files | Wastes bandwidth on non-critical weights |
| Serving TTF/OTF to browsers | Larger files, WOFF2 is smaller and universal |
| 4 font families on one page | 12+ files, inconsistent visual identity |
| No subsetting for Latin-only site | Shipping CJK glyphs nobody uses |
| Google Fonts in production without self-hosting option | Extra DNS + connection latency |
Audit checklist
-
font-display: swaporoptionalon all @font-face - Critical font weight preloaded
- ≤ 2 font families
- ≤ 3 weights per family
- WOFF2 format only
- Subset to character ranges actually used
- Fallback font metrics matched to reduce FOUT
- Total font payload ≤ 100KB
Sources
- web.dev · "Best practices for fonts"
canon-typographyfor font selection rulescanon-performancefor Core Web Vitals targets- Zach Leatherman · "A Comprehensive Guide to Font Loading Strategies"