HTML & CSS Interview Question #144

Why can large web fonts hurt performance and how can they be optimized?

Advanced CSS, Accessibility, Performance, Debugging & Senior Scenarios Senior Advanced

Quick Interview Answer

Fonts can delay text rendering and add substantial network cost when many families, weights, styles, or character sets are downloaded. A page should load only the font resources it actually needs.

Detailed Explanation

Fonts can delay text rendering and add substantial network cost when many families, weights, styles, or character sets are downloaded. A page should load only the font resources it actually needs.

Use efficient formats such as WOFF2, appropriate font-display behavior, sensible system fallbacks, and font subsetting when suitable. Preload only truly critical fonts because unnecessary preloads compete with other important resources.

Code Example

@font-face {
    font-family: "SiteFont";
    src: url("/fonts/site-regular.woff2")
         format("woff2");
    font-weight: 400;
    font-display: swap;
}

body {
    font-family:
        "SiteFont",
        system-ui,
        sans-serif;
}