{"id":830,"date":"2022-09-12T18:32:29","date_gmt":"2022-09-12T18:32:29","guid":{"rendered":"https:\/\/glossary.dream.press\/glossary\/%group%\/font-family\/"},"modified":"2026-08-07T11:34:08","modified_gmt":"2026-08-07T11:34:08","slug":"font-family","status":"publish","type":"glossary","link":"https:\/\/glossary.dream.press\/glossary\/web-design\/font-family\/","title":{"rendered":"font-family"},"content":{"rendered":"\n

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<\/a>, the fonts appear in priority order, separated by commas, and each is written as a family-name<\/em> or a generic-name<\/em>.<\/p>\n\n\n\n

Here’s a realistic declaration: font-family: Helvetica, Arial, sans-serif;<\/code>. 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.<\/p>\n\n\n\n

How the browser chooses a font<\/h3>\n\n\n\n

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<\/a>, 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.<\/p>\n\n\n\n

\"Flowchart<\/figure>\n\n\n\n

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.<\/p>\n\n\n\n

Family names and generic names<\/h3>\n\n\n\n

The family-name<\/em> 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\"<\/code> or \"Goudy Bookletter 1911\"<\/code>, to avoid escaping mistakes.<\/p>\n\n\n\n

The generic-name<\/em> value is a fallback: the browser uses it when none of the named fonts is available. It must be an unquoted keyword. Writing \"serif\"<\/code> 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.<\/p>\n\n\n\n

The generic font families<\/h3>\n\n\n\n

Each generic name describes a broad style category rather than one font. CSS defines 5 classic generic families, plus system-ui<\/code>:<\/p>\n\n\n\n