HTML & CSS Interview Question #75

What are web fonts and how should they be loaded efficiently?

CSS Fundamentals, Selectors, Cascade, Specificity, Box Model, Units & Typography Mid-Level Intermediate

Quick Interview Answer

Web fonts are font resources downloaded by the browser instead of relying only on fonts installed on the user's device. They can be declared with @font-face or loaded through a font service.

Detailed Explanation

Web fonts are font resources downloaded by the browser instead of relying only on fonts installed on the user's device. They can be declared with @font-face or loaded through a font service.

Production sites should minimize unnecessary font families and weights, use efficient formats such as WOFF2, define sensible fallback fonts, and choose an appropriate font-display strategy. Preloading can help for a genuinely critical font, but excessive preloading wastes bandwidth.

Code Example

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

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