Lesson 8 of 8
Font stacks
- 11 min
- 4 checks
- 3 hints
- Go to task
Goal
A ready fallback for every font
Explanation
The value of font-family is a list, not a single name. The browser goes through it in order and uses the first font it finds on the reader's device. If it finds none of them, it shows the text in its default font, usually a serif like Times that looks nothing like your design.
That's why every stack ends with a generic family like sans-serif. It isn't one particular font: it asks the browser for the closest font it has of that kind. system-ui is the operating system's own interface font, so there's nothing to download and nothing to wait for. A font you define with @font-face needs font-display: swap, or the browser hides the text for a few seconds while it waits for the font to load.
The hidden trap is quotes. "sans-serif" in quotes is read as the name of a font that doesn't exist, not as the generic family, so the whole stack falls back to the default font.
Your task
Set the page font to system-ui followed by a generic family, add fallback fonts after "Wun Display" in .brand that end with a generic family, and add the line font-display: swap to @font-face.
Checks
4 checks- The page font is system-ui
- An unquoted generic family follows system-ui
- The heading has fallbacks after its custom font
- The @font-face rule has font-display