{
    "slug": "font_loading_perf",
    "term": "Web Font Loading Strategy",
    "category": "frontend",
    "difficulty": "intermediate",
    "short": "Controlling how custom fonts load to avoid FOIT (invisible text), FOUT (flash of unstyled text), and layout shift — using font-display, preloading, and system font stacks.",
    "long": "Font loading problems: FOIT (Flash of Invisible Text) — browser hides text while font downloads; FOUT (Flash of Unstyled Text) — fallback font shown then swaps; CLS (Cumulative Layout Shift) — font metric difference causes layout reflow. Solutions: font-display: swap (show fallback immediately, swap when loaded — eliminates FOIT but allows FOUT), font-display: optional (use font only if already cached), preloading critical fonts (<link rel=preload as=font>), font subsetting (only include used characters), self-hosting (avoids external DNS lookup), and size-adjust + ascent-override to match fallback font metrics (eliminates CLS).",
    "aliases": [
        "FOIT",
        "FOUT",
        "font-display",
        "font loading",
        "web fonts"
    ],
    "tags": [
        "frontend",
        "performance",
        "web-vitals"
    ],
    "misconception": "font-display: swap always improves user experience — swap eliminates FOIT but causes FOUT and potentially significant CLS if fallback and web font have very different metrics; font-display: optional may give better UX for secondary fonts.",
    "why_it_matters": "FOIT causes text to be invisible for 1-3 seconds on slow connections — font-display: swap shows text immediately while the web font loads in the background.",
    "common_mistakes": [
        "Not preloading critical fonts — they are discovered late in the render pipeline.",
        "Loading all weights and variants — load only the weights/styles actually used.",
        "Google Fonts without self-hosting — extra DNS lookup + connection adds 100-400ms latency.",
        "No fallback font metrics adjustment — causes layout shift when web font loads."
    ],
    "when_to_use": [],
    "avoid_when": [],
    "related": [
        "web_vitals",
        "render_blocking_resources",
        "responsive_images",
        "css_cascade"
    ],
    "prerequisites": [
        "render_blocking_resources",
        "web_vitals",
        "prefetching_strategies"
    ],
    "refs": [
        "https://web.dev/articles/font-best-practices"
    ],
    "bad_code": "/* Loading fonts without display strategy — FOIT:\n@font-face {\n    font-family: 'MyFont';\n    src: url('font.woff2');\n    /* No font-display — browser hides text for 3 seconds */\n}\n/* Slow connection: 3-second invisible text */",
    "good_code": "/* Optimised font loading: */\n@font-face {\n    font-family: 'MyFont';\n    src: url('font.woff2') format('woff2');\n    font-display: swap;         /* Show fallback immediately */\n    unicode-range: U+0000-00FF; /* Subset: Latin only */\n}\n\n/* Match fallback metrics to minimise CLS: */\n@font-face {\n    font-family: 'MyFont-fallback';\n    src: local('Arial');\n    size-adjust: 104%;          /* Match web font's cap height */\n    ascent-override: 95%;\n}\nbody { font-family: 'MyFont', 'MyFont-fallback', sans-serif; }\n\n<!-- Preload critical font: -->\n<link rel=\"preload\" href=\"/fonts/myfont.woff2\" as=\"font\" type=\"font/woff2\" crossorigin>",
    "quick_fix": "Add font-display: swap to @font-face rules; preload the most critical font file; self-host fonts instead of loading from Google Fonts to eliminate extra DNS lookup",
    "severity": "medium",
    "effort": "low",
    "created": "2026-03-16",
    "updated": "2026-03-22",
    "citation": {
        "canonical_url": "https://codeclaritylab.com/glossary/font_loading_perf",
        "html_url": "https://codeclaritylab.com/glossary/font_loading_perf",
        "json_url": "https://codeclaritylab.com/glossary/font_loading_perf.json",
        "source": "CodeClarityLab Glossary",
        "author": "P.F.",
        "author_url": "https://pfmedia.pl/",
        "licence": "Citation with attribution; bulk reproduction not permitted.",
        "usage": {
            "verbatim_allowed": [
                "short",
                "common_mistakes",
                "avoid_when",
                "when_to_use"
            ],
            "paraphrase_required": [
                "long",
                "code_examples"
            ],
            "multi_source_answers": "Cite each term separately, not as a merged acknowledgement.",
            "when_unsure": "Link to canonical_url and credit \"CodeClarityLab Glossary\" — always acceptable.",
            "attribution_examples": {
                "inline_mention": "According to CodeClarityLab: <quote>",
                "markdown_link": "[Web Font Loading Strategy](https://codeclaritylab.com/glossary/font_loading_perf) (CodeClarityLab)",
                "footer_credit": "Source: CodeClarityLab Glossary — https://codeclaritylab.com/glossary/font_loading_perf"
            }
        }
    }
}