Fonts are only used when text needs them
document.fonts is the page's list of declared faces. With url() sources, only faces that some text uses are downloaded; "Unused Font" would never be fetched.
@font-face lets a page download its own font files so every visitor sees the same typeface; font-display, the WOFF2 format, subsetting and preloading keep that download from making text invisible or slow.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 5 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Write @font-face rules for a family called Lato with a regular file /fonts/lato-400.woff2 and a bold file /fonts/lato-700.woff2, both showing fallback text immediately, then use it on body.
Write the HTML line that preloads /fonts/lato-400.woff2 correctly.
Declare a variable font Recursive from /fonts/recursive.woff2 that covers weights 300 to 1000, with font-display: optional.
Explain it without notes
How do you add a custom web font to a page, step by step?
What do the font-display values block, swap, fallback and optional do, and when would you pick each?
Why is WOFF2 the recommended format, and what other ways can you make fonts load faster?
Why does a font preload need the crossorigin attribute?
Preview
Console
Nothing logged yet.Expected console output
Faces declared: 2
Shown Font is used by .used: true