The font-family property sets a prioritized list of typefaces for text. The browser tries each name in order and uses the first font that is available (installed or loaded via @font-face).
Always end the list with a generic family such as sans-serif or serif. The property is inherited. Pair it with font-size, font-weight, and the font shorthand when you need more than a typeface.
Not deprecated. Core families are Baseline widely available. Newer generics such as math and ui-* have uneven support — keep a classic fallback in the stack.
font-family: <family-name> | <generic-family> [ , <family-name> | <generic-family> ]* | initial | inherit;Comma-separated stack. Preferred fonts first; a generic last. Example: "Georgia", serif.
| Value | Description | Try it |
|---|---|---|
<family-name> | A named font. Quote names with spaces (e.g. "Times New Roman") | Try it |
serif | Generic with finishing strokes (e.g. Times-like) | Try it |
sans-serif | Generic with plain stroke endings (e.g. Arial-like) | Try it |
monospace | Fixed-width glyphs (code and data) | Try it |
cursive | Handwriting-like generic | Try it |
fantasy | Decorative generic (exact face varies by OS) | Try it |
system-ui | Platform UI font. Prefer for controls, not long articles | Try it |
initial | Resets to the user-agent default family | Try it |
inherit | Takes the parent font-family (default behavior is already inherited) | Try it |
font-familyBuild a short stack: preferred fonts, then a safe generic.
sans-serif, serif, or monospace.@font-face when needed, still keeping a fallback stack.| Piece | Required? | Role |
|---|---|---|
| Named fonts | Optional | Exact typefaces you prefer |
| Generic family | Strongly recommended | Last-resort style match |
| Quotes | When needed | Spaces / special characters in names |
Change only font-family. Size and weight stay fixed so you can compare typefaces.
Each snippet focuses on font-family. Use Try It Yourself for a live editor.
Prefer Georgia; fall back to any serif if it is missing.
<style>
p {
font-family: Georgia, serif;
}
</style>
<p>Readable serif text</p>Georgia is tried first.serif is the safety net if Georgia is not installed.serif is a keyword, not a font file name.A typical UI stack with a generic ending.
<style>
p {
font-family: Arial, Helvetica, sans-serif;
}
</style>
<p>Clean sans-serif text</p>sans-serif. Style stays consistent if both names fail.Fixed-width letters for snippets and data.
<style>
code {
font-family: "Courier New", Courier, monospace;
}
</style>
<code>const x = 42;</code>"Courier New" needs quotes because of the space.Courier is a common alternate.monospace. Every glyph stays equal width.monospace alone can use a smaller browser default — a named stack avoids that surprise.Stacks fail quietly. Quote carefully and keep a generic at the end.
Times New Roman without quotes is invalid. Use "Times New Roman". Never quote generics like sans-serif.
A named-only stack can fall through to an unexpected default. End with serif, sans-serif, or monospace.
monospace can look smallerBrowsers may apply a smaller preferred mono size when the value is only monospace. Prefer a short named stack, or set font-size explicitly.
system-ui is for UI, not essaysIt matches the OS control font. For long reading text, prefer a body stack ending in sans-serif or serif.
If the first font lacks a glyph, later fonts in the stack can fill in that character.
font-family is a browser style property. Node.js, Deno, and Bun do not apply it. Core stacks are universal; some newer generics are not.
Chrome 1+, Firefox 1+, Safari 1+, Edge 12+, Opera 3.5+, Internet Explorer 3+. system-ui needs newer engines (Chrome 56+, Safari 11+, Firefox 92+).
Bottom line: Safe for production. Keep classic generics in every stack so newer keywords like math or ui-* are optional enhancements.
One line: font-family is a prioritized font list that should end with a generic fallback.
Tune OpenType features when a font supports them.
8 people found this page helpful