What is font-family in CSS?

The browser works through a font-family list from top to bottom and applies the first font that is installed or that it can download with an @font-face rule; every name after the first is a fallback. In CSS, the fonts appear in priority order, separated by commas, and each is written as a family-name or a generic-name.

Here's a realistic declaration: font-family: Helvetica, Arial, sans-serif;. The browser tries Helvetica first, moves to Arial if Helvetica isn't installed, and finally falls back to whatever sans-serif font the visitor's device has.

How the browser chooses a font

The browser picks the first font in the list that is installed or that a @font-face rule can download. Selection doesn't stop there: per MDN's CSS reference, fonts are selected one character at a time, so if the chosen font is missing a glyph, say, a currency symbol or an accented letter, the browser pulls that character from the next font in the list.

If none of the named fonts is available and the list has no generic family, the browser substitutes its own default font, and your design intent is lost. No font is guaranteed to exist on a visitor's device, so end every font-family list with a generic keyword.

Family names and generic names

The family-name value names a specific font family, such as Helvetica. Write family names as quoted strings or as unquoted identifiers. A multi-word name like Gill Sans may stay unquoted when each word is a valid CSS identifier, but quoting is the safer habit: quote any name containing white space, digits, or punctuation characters other than hyphens, for example "Gill Sans Extrabold" or "Goudy Bookletter 1911", to avoid escaping mistakes.

The generic-name value is a fallback: the browser uses it when none of the named fonts is available. It must be an unquoted keyword. Writing "serif" in quotes makes the browser treat it as a specific font's name, so the fallback silently stops working. Put the generic name last in the list.

The generic font families

Each generic name describes a broad style category rather than one font. CSS defines 5 classic generic families, plus system-ui:

• serif: glyphs have finishing strokes with flared or tapering ends, like Georgia.
• sans-serif: glyphs have plain stroke endings, like Arial or Helvetica.
• monospace: every glyph has the same fixed width, the standard pick for code.
• cursive: glyphs generally have joining strokes, like handwriting.
• fantasy: primarily decorative display fonts.
• system-ui: whatever font the visitor's operating system uses for its own interface.

Newer keywords exist as well: ui-serif, ui-sans-serif, ui-monospace, ui-rounded, math, and fangsong. Support depends on the keyword, per caniuse.com support tables (StatCounter usage data, July 2026). system-ui works in every major browser, supported since Chrome 56, Edge 79, Safari 11, and Firefox 92. math joined more recently: Chrome and Edge 109, Firefox 149, and Safari 26.2. The 4 ui-* keywords render only in Safari 13.1 and later, and fangsong has no caniuse table at all, so treat those as experimental and always end the list with a classic generic family.

For a closer look at the two most common categories, see our serif and sans serif fonts entry.

Font vs. font family

A font family is the whole named design; a font is one member of it in a specific weight and style. In CSS, the two are selected by different properties:

• A font family is the complete design, such as Helvetica.
• A font is one member of that family, such as Helvetica Bold Italic.
• font-family selects the family, while font-weight and font-style pick the member's weight and style.

Web-safe font stacks

A web-safe stack lists fonts that ship pre-installed across operating systems, so text looks close to identical everywhere without downloading anything. Two dependable examples: font-family: Arial, Helvetica, sans-serif; and font-family: Georgia, serif;. For a full list organized by category, see our guide to web-safe fonts.

Custom fonts and Google Fonts

font-family can only select fonts the visitor's browser already has or can download, so a custom font has to be loaded before you can name it. Load it with a @font-face rule or a hosted service like Google Fonts, then reference the registered name in your font-family list, still ending with a generic fallback in case the download fails. Our picks of the best Google Fonts cover choosing and pairing, and our guide to web font performance covers the load-time cost that downloaded fonts add.

font-family is one of several CSS font properties. Pair it with font-size to control how large the chosen typeface renders, and test your stack in more than one browser before you ship it.