Use self-hosted, subset, and preloaded web fonts with font-display swap.
- Use self-hosted, subset, and preloaded web fonts with font-display swap1 cited source1 category
Save for later 0
Use × to move an item here. You can restore it when you’re ready.
Your checks and saved items stay in this browser. Nothing is submitted.
Why this matters
Optimized font loading prevents invisible text during font load and reduces render-blocking times.
Hypothetical standard operating procedure
Adapt this example to your site, access, tools, and change process. It is our suggested procedure, informed by the sources below.
- Identify fonts used site-wide and analyze character usage for subset.
- Host fonts locally or from reliable CDN supporting HTTP/2.
- Add preload link tags for key font files in HTML head.
- Use font-display: swap in @font-face declarations.
- Test pages to verify fonts load quickly without invisible text delays.
Watch for
Unoptimized fonts delay text display leading to bad CLS and FCP metrics.
Definition of done
Fonts are subset to necessary characters, preloaded, use font-display: swap, and do not block rendering.
Sources & attribution
Original checklist wording and example SOP by Best SEO Checklist, using source-grounded AI assistance. Editorial contact: Ted Kubaitis, @tedkubaitis on Teams. Check current source guidance before implementation.