typography
font-family
Sets a prioritized list of typefaces to render text with. The browser walks the list until it finds one that is available, so always end with a generic fallback.
font-family: <family-name> [, <family-name>]* [, <generic-family>]Common values
| Value | Effect |
|---|---|
| system-ui | Uses the operating system's default UI font |
| sans-serif | Generic sans-serif fallback |
| serif | Generic serif fallback |
| monospace | Generic monospaced fallback |
| ui-monospace | System monospaced UI font |
Examples
body { font-family: 'Inter', system-ui, sans-serif; }Prefers Inter, falls back to system UI font
code { font-family: ui-monospace, 'SF Mono', Menlo, monospace; }Native monospace font stack for code
h1 { font-family: Georgia, 'Times New Roman', serif; }Serif headings with cross-platform fallbacks
Gotcha
Wrap multi-word family names in quotes and always include a generic family so text still renders if all custom fonts fail.
Related properties
font-size
Sets the size of rendered text. Modern designs use rem for accessibility and clamp() for fluid typography that scales with the viewport.
font-weight
Sets the thickness of glyphs. Numeric weights from 100 to 900 map to Thin through Black; variable fonts accept any integer up to 1000.
line-height
Sets the vertical distance between lines of text. Unitless values are preferred because they scale with the element's own font size.
color
Sets the foreground text color and inherits by default. Modern browsers support oklch() and color(display-p3) for wider-gamut design systems.
text-align
Sets the horizontal alignment of inline content inside a block. start and end respect the writing direction, which is preferred for internationalized sites.