ONE FOCUSED ACTION

Use self-hosted, subset, and preloaded web fonts with font-display swap.

Website performance SEO

1 checklist items

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.

    A STARTING-POINT EXAMPLE

    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.

    1. Identify fonts used site-wide and analyze character usage for subset.
    2. Host fonts locally or from reliable CDN supporting HTTP/2.
    3. Add preload link tags for key font files in HTML head.
    4. Use font-display: swap in @font-face declarations.
    5. 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

    1. Website Audit Checklist ↗

    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.