The font-family property sets the typeface used for an element's text, accepting a prioritized list of font names that the browser tries in order until it finds one available.

Syntax

font-family: "Preferred Font", fallback-font, generic-family;

Deep Dive Course

font-family accepts a comma-separated list, called a font stack, and the browser uses the first font in the list that's actually available on the user's system or loaded via @font-face, falling back to the next one if it isn't — the list should always end with a generic family keyword, like sans-serif, serif, or monospace, guaranteeing some reasonable font renders even if every named font in the stack fails to load. Font names containing spaces, like 'Times New Roman', need to be wrapped in quotes, though quoting is optional for single-word names.

1Understanding Font-family

💡

Always end a font-family list with a generic family keyword, like sans-serif or serif — without it, if every named font in the stack fails to load, the browser falls back to its own unpredictable default rather than at least matching the intended general style.

editor.html

body {
  font-family: "Helvetica Neue", Arial, sans-serif;
}

localhost:3000

2Practical Example

Here is a real-world application of Font-family showing how it is used in production CSS code.

editor.html

code {
  font-family: "Courier New", monospace;
}

localhost:3000

3Best Practices

Follow these guidelines when working with Font-family:

1. Always include a generic family keyword, like sans-serif or serif, as the final fallback in a font-family list

2. Quote font names containing spaces, like "Times New Roman", since unquoted multi-word names would otherwise be misparsed as multiple separate font names

3. List web-safe or explicitly loaded fonts first, with progressively more general fallbacks afterward, so text remains reasonably styled even if a specific font fails to load

⚠️

Tip: Always end a font-family list with a generic family keyword, like sans-serif or serif — without it, if every named font in the stack fails to load, the browser falls back to its own unpredictable default rather than at least matching the intended general style.

editor.html

body {
  font-family: "Helvetica Neue", Arial, sans-serif;
}

localhost:3000

Examples

Example 01Basic Usage

body {
  font-family: "Helvetica Neue", Arial, sans-serif;
}

Example 02Advanced Example

code {
  font-family: "Courier New", monospace;
}

Best Practices

Always include a generic family keyword, like sans-serif or serif, as the final fallback in a font-family list
Quote font names containing spaces, like "Times New Roman", since unquoted multi-word names would otherwise be misparsed as multiple separate font names
List web-safe or explicitly loaded fonts first, with progressively more general fallbacks afterward, so text remains reasonably styled even if a specific font fails to load

Interview Question

Why is it considered important to always end a font-family list with a generic family keyword like sans-serif, rather than just listing a few specific preferred fonts?▼

Hint: Think about what happens if every single named font in the list fails to be available on a particular user's system.

A font-family list works by the browser trying each named font in order and using the first one it can actually find, either installed locally or loaded via @font-face, but there's always some possibility, however small, that none of the specifically named fonts in the list are available on a given user's system, whether due to a failed font download, an unusual system configuration, or simply a font that isn't installed. Without a generic family keyword as the final fallback, the browser has no more explicit instructions left to follow and falls back to its own internal default font, which could be anything and might clash noticeably with the page's intended visual style, like an unexpectedly serif font appearing where a clean sans-serif look was intended. Including a generic keyword like sans-serif, serif, or monospace as the last item guarantees that even in the worst case, where every specifically named font fails, the browser still selects some font from the correct general category, preserving at least the intended overall visual character of the text rather than an arbitrary, potentially mismatched default.

Exercises

MediumPractice using Font-family in a real scenario.

View Solution

body {
  font-family: "Helvetica Neue", Arial, sans-serif;
}

Frequently Asked Questions

Why is it considered important to always end a font-family list with a generic family keyword like sans-serif, rather than just listing a few specific preferred fonts?▼

Related Functions

Font-sizeFont-weightLine-height