Font stack

font-family takes a list, not a name, and the browser walks it left to right until it finds a face it can use. The last entry should always be a generic family (serif, sans-serif, monospace, system-ui, and friends), because that is the only entry guaranteed to resolve to something: without it, a stack that runs out falls back to whatever the browser’s default font happens to be, which is a decision nobody made.

The step people miss is that matching happens per character, not per element. The browser takes the first font in the list that has a glyph for the character it is setting, so a stack can be resolved for the Latin text and fall through to the third entry for a curly quote or an arrow the first font never drew. This is why a page can show one word in a subtly different face, and why a stack ending in a well covered fallback matters for anything multilingual.

Names are matched against installed and declared faces, so the same list serves web fonts and local ones: put the @font-face family first and the local names after it, and the stack becomes what renders during the load as well as what renders if it fails. Quote family names containing spaces or reserved words, and remember the CSS-wide keywords are off limits as unquoted names. system-ui asks for the interface face of the platform (San Francisco, Segoe UI, Roboto), which is why the long “system font stack” that used to be pasted into every project has mostly collapsed into that one keyword plus a couple of insurance entries.

Every entry in the stack is a different set of proportions, so a fallback is a layout change waiting to happen: swapping to a face with a different x-height or width shifts line breaks, retotals the space a heading needs, and produces the visible jump when the real font finally arrives. Choose fallbacks by metric similarity rather than by taste, then close the remaining gap with size-adjust, ascent-override, and descent-override on a local @font-face rule, which lets a fallback occupy exactly the space the intended face will. Keep the list short. Three or four entries is a decision; nine is a paste, and nobody has checked what the seventh one looks like.