CSS font-family Property
The font-family CSS property creates font family names or generic family names for the selected element. See some examples.
The CSS font-family property sets which typeface is used to render text. You give it a prioritized list of fonts, and the browser walks that list from left to right, using the first one it can find on the user's device.
This page covers how the font stack works, the difference between specific and generic families, how to build a reliable fallback list, and the gotchas around quoting and per-character matching.
How the font stack works
You separate the values with commas, and the browser treats them as alternatives — not as a combined font. It uses the first font in the list that is available, then stops:
font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;Here the browser tries "Segoe UI" first. If it isn't installed, it tries Roboto, then Helvetica, then Arial, and finally the generic sans-serif, which the browser always satisfies with one of its built-in fonts. This is why a font stack should always end with a generic family — it guarantees the text renders in something sensible even on a device with none of your preferred fonts.
The two kinds of font name
There are two types of value you can list, and a good stack mixes both:
family-name— the name of a specific typeface, such as"Times New Roman",Courier, orArial. You list these first because they are the fonts you actually want.generic-family— a category keyword that the browser maps to a suitable built-in font. List one of these last as the ultimate fallback. The standard generic families are:
| Generic family | Typical look | Example fonts |
|---|---|---|
serif | Letters with small strokes ("feet") | Times New Roman, Georgia |
sans-serif | Clean, no strokes — common for UI/body text | Arial, Helvetica |
monospace | Every character the same width — for code | Courier New, Consolas |
cursive | Handwriting / script style | Brush Script, Comic Sans |
fantasy | Decorative display style | Impact, Papyrus |
system-ui | The device's native UI font | San Francisco, Segoe UI |
Quoting font names
When a font name contains whitespace (or could be mistaken for a keyword), wrap it in quotation marks:
/* Multi-word names need quotes */
font-family: "Courier New", "Lucida Console", monospace;
/* Single-word names don't, but quotes are still valid */
font-family: Georgia, serif;Never put quotes around the generic family keyword — "sans-serif" would be read as a font literally named "sans-serif" rather than the generic category.
Per-character fallback
Font selection does not stop at the first available font for the whole text — it happens one character at a time. If the matched font is missing a glyph for a particular character (say an emoji or a non-Latin letter), the browser keeps scanning the list for a font that does have that glyph. This is why keeping a broad generic family at the end helps with mixed-language or symbol-heavy content.
To load and use a custom font that isn't installed on the user's device, define it with the @font-face rule and then reference its name in font-family.
| Initial Value | serif |
|---|---|
| Applies to | All elements. It also applies to ::first-letter and ::first-line. |
| Inherited | Yes. |
| Animatable | No. |
| Version | CSS1 |
| DOM Syntax | object.style.fontFamily = "Verdana, sans-serif"; |
Syntax
Syntax of CSS font-family Property
font-family: family-name | generic-family | initial | inherit;Example of the font-family property:
Example of CSS font-family Property with sans-serif value
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}
</style>
</head>
<body>
<h2>Font-family property example</h2>
<p>We used "Lucida Grande" font-family for this text.</p>
</body>
</html>The stack above asks for "Lucida Sans Unicode", falls back to "Lucida Grande" (the macOS equivalent), and finally to whatever the browser uses for sans-serif — so the paragraph stays readable everywhere.
Building a robust font stack
A practical stack lists, in order: your ideal font, one or two widely-installed alternatives with a similar look, and a generic family to close it out. A common "system font" stack that uses each platform's native UI face looks like this:
body {
font-family: -apple-system, system-ui, "Segoe UI", Roboto,
"Helvetica Neue", Arial, sans-serif;
}This renders in San Francisco on Apple devices, Segoe UI on Windows, and Roboto on Android — with no web font to download.
Values
| Value | Description | Play it |
|---|---|---|
| family-name, generic-family | Prioritized list of font family names and/or generic family names. | Play it » |
| initial | Makes the property use its default value. | Play it » |
| inherit | Inherits the property from its parent element. | Play it » |
Related properties
font-family is usually set alongside the other font properties, or all at once with the font shorthand:
- font-size — how large the text is.
- font-weight — boldness of the text.
- font-style — italic or normal.
- @font-face — load a custom web font to reference here.