Font Loading Optimization
font-display Values
| Value | Block Period | Swap Period | Best For |
|---|---|---|---|
auto | Browser decides | — | Default behavior |
block | 3s | Infinite | Critical fonts (icon fonts) |
swap | 0ms | Infinite | Body text (SEO-friendly) |
fallback | 100ms | 3s | Balance of performance & style |
optional | 100ms | 0ms | Decorative fonts |
Optimal Font Loading Strategy
<!-- Step 1: Preload critical fonts -->
<link rel="preload"
href="/fonts/inter-var.woff2"
as="font"
type="font/woff2"
crossorigin>
<!-- Step 2: CSS with font-display -->
@font-face {
font-family: 'Inter';
src: url('/fonts/inter-var.woff2') format('woff2');
font-display: swap;
font-weight: 100 900; /* variable font range */
unicode-range: U+0000-00FF; /* subset: Latin */
}
<!-- Step 3: System font fallback stack -->
body {
font-family: 'Inter', system-ui, -apple-system,
BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
Font Subsetting (size reduction)
# Install pyftsubset (fonttools) pip install fonttools brotli # Subset to Latin characters only pyftsubset font.ttf \ --output-file=font-subset.woff2 \ --flavor=woff2 \ --unicodes="U+0000-00FF,U+0131,U+0152-0153" # Typical size reduction: 400KB → 30KB for Latin subset
Chinese Web Font Strategy
- Chinese fonts are 5–30MB — never load full font files
- Use Google Fonts with &text= parameter for specific characters
- Consider Fontsource for self-hosted subsets
- For body text: rely on system CJK fonts (PingFang, Microsoft YaHei)