The font-family property sets which typeface the text uses. You list fonts in order of preference, and the browser uses the first one that is available. Pick a value below to see it live, or type your own.
The quick brown fox jumps over the lazy dog. 0123456789
font-family: "Font Name", fallback-font, generic-family;
Separate fonts with commas. Put names that contain spaces in quotes, like "Times New Roman". Always finish with a generic family so the browser has something to fall back on if none of your fonts are installed.
| Value | What you get |
|---|---|
serif | Fonts with small strokes on the letters, such as Times or Georgia |
sans-serif | Clean fonts without strokes, such as Arial or Helvetica |
monospace | Every character has the same width; ideal for code |
system-ui | The operating system's interface font (San Francisco, Segoe UI, Roboto…) |
cursive / fantasy | Handwriting-style or decorative fonts. Results vary a lot between devices |
A font stack is the list of fallbacks. These three cover most needs without loading any web font:
/* Modern system font */ font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; /* Classic serif */ font-family: Georgia, "Times New Roman", serif; /* Code */ font-family: ui-monospace, "Cascadia Code", "Courier New", monospace;
To use a font your visitors may not have installed, load it first (for example from Google Fonts or with @font-face), then name it at the start of your stack:
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap");
body {
font-family: "Inter", system-ui, sans-serif;
}
The fallbacks after "Inter" are shown while the font downloads and on any device where it fails to load.
Check that the font is installed or loaded with @font-face or a link to Google Fonts, that names with spaces are in quotes, and that a more specific CSS rule is not overriding yours.
Quotes are required only around names that contain spaces or special characters, such as "Times New Roman". Generic families like serif must never be quoted.
A system font stack such as system-ui, -apple-system, "Segoe UI", Roboto, sans-serif loads instantly and looks native on every device.