Font Stack

A font stack is the ordered list of font families in a CSS font-family declaration. The browser works through the list from left to right, using the first font that is available on the system or has been loaded. The later entries in the stack are fallbacks — they serve when preferred fonts aren't available.

/* Classic font stack */
body {
  font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;
}

Here, Inter is tried first. If unavailable, Helvetica Neue is used. If that's missing, Arial. If all named fonts fail, the browser uses its default sans-serif.

Generic font families (always last in the stack):

The final entry in any stack should be a generic keyword — serif, sans-serif, monospace, cursive, or system-ui. These are not specific fonts; they're instructions to the browser to use its default font in that category. They never fail.

/* Complete stacks for common use cases */

/* Sans-serif body text */
body {
  font-family: 'Source Sans 3', 'Helvetica Neue', Arial, sans-serif;
}

/* Serif editorial */
.article {
  font-family: 'Lora', Georgia, 'Times New Roman', serif;
}

/* Monospace code */
code {
  font-family: 'JetBrains Mono', 'Fira Code', 'Cascadia Code',
               'Consolas', 'Courier New', monospace;
}

System font stack:

For interfaces that should feel native to the operating system, the system font stack uses each OS's default UI font:

body {
  font-family:
    system-ui,
    -apple-system,           /* Safari on macOS/iOS */
    BlinkMacSystemFont,      /* Chrome on macOS (legacy) */
    'Segoe UI',              /* Windows */
    Roboto,                  /* Android/Chrome OS */
    'Helvetica Neue',        /* Older macOS */
    Arial,                   /* Universal fallback */
    sans-serif;
}

GitHub, Linear, and many developer tools use system font stacks to reduce load times and match platform conventions.

Fallback font metrics — reducing layout shift:

When a web font loads and replaces a fallback, differences in the fonts' metrics (x-height, line-height, character width) cause layout shift. CSS allows overriding fallback font metrics to match the web font:

/* Override fallback metrics to match Inter */
@font-face {
  font-family: 'Inter-fallback';
  src: local('Arial');
  ascent-override: 90%;
  descent-override: 22.43%;
  line-gap-override: 0%;
  size-adjust: 107.64%;
}

body {
  font-family: 'Inter', 'Inter-fallback', sans-serif;
}

Tools like Fontaine and Next.js's next/font module generate these adjusted fallback declarations automatically, making them practical to use without manual metric measurement.