Font stack
The ordered list of typefaces in font-family: the browser uses the first one it can render and falls through to the rest.
See it
What it is
A font stack is the ordered list you hand to 'font-family'. The browser walks it left to right and uses the first typeface it can actually render, which is why every stack should end in a generic family ('sans-serif', 'serif', 'monospace') as the guaranteed last resort. The walk happens per character, not per element: if your webfont has no Cyrillic, only the Cyrillic glyphs fall through to the next font while the Latin ones stay put.
Two stacks do most of the work in practice. The system font stack ('-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif') downloads nothing and makes an app feel native on every OS. The fallback stack sits behind a webfont and decides what readers stare at during the second before it arrives.
Gotcha: fallbacks that do not match your webfont's metrics cause a visible reflow when the swap happens. Pick a fallback with a similar x-height and width, or declare a second '@font-face' pointing at the local fallback with 'size-adjust', 'ascent-override' and 'descent-override' tuned so both fonts occupy identical space.
Ask AI for it
Define two font stacks as CSS custom properties: a UI stack that starts with my webfont and falls back through a metric-similar system font to the 'sans-serif' generic, and a code stack ending in 'monospace'. Add a fallback '@font-face' using 'local("Arial")' with 'size-adjust' and 'ascent-override' tuned so the swap causes no layout shift, and set 'font-display: swap' on the real font. Comment each line with what it covers.