CSS font-family Property

What You’ll Learn

The font-family property sets the typeface for text using a prioritized font stack. It is one of the most important properties for readable, on-brand web typography.

Introduction

The font-family property in CSS is used to specify the typeface of text. It allows web developers to define a prioritized list of font family names and/or generic family names for the selected element.

Definition and Usage

This property plays a crucial role in controlling the typography of a web page, ensuring that text is rendered in a visually appealing and readable manner. List fonts from most preferred to most fallback, and end with a generic family like sans-serif or serif whenever possible.

📝 Syntax

The syntax for the font-family property involves listing one or more font family names, separated by commas. Generic family names should always be included as a fallback:

element {
  font-family: "font-name", generic-family;
}

Here, "font-name" can be a specific font family, and generic-family is one of the five generic font families: serif, sans-serif, monospace, cursive, or fantasy.

Basic Example

p {
  font-family: "Arial", sans-serif;
}

Default Value

The default value of the font-family property depends on the user agent (browser). Typically, it is set to the browser's default sans-serif font.

Syntax Rules

• Separate multiple font names with commas, most preferred first.
• Quote names that contain spaces: "Times New Roman".
• Always include a generic family as the final fallback when possible.
• The property is inherited — set it on body for site-wide typography.
• Font names are case-sensitive on some systems; match official spelling.

💎 Property Values

Specific font family names

Named typefaces installed on the user's device or loaded as web fonts, such as Arial, Times New Roman, and Courier New.

Generic family names

System UI keywords

Modern stacks often include system-ui or ui-sans-serif so text matches the operating system interface font before falling back to generic families.

Common Font Stacks

Examples Gallery

In this example, we set the font family of a paragraph to Arial with a sans-serif fallback — plus serif stacks, monospace code, and a web font with @font-face.

<style>
  p {
    font-family: "Arial", sans-serif;
  }
</style>

<p>
  This paragraph uses Arial. If Arial is not available, it falls back to a sans-serif font.
</p>

article {
  font-family: Georgia, "Times New Roman", Times, serif;
}

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

@font-face {
  font-family: "Brand Sans";
  src: url("/fonts/brand-sans.woff2") format("woff2");
}

h1 {
  font-family: "Brand Sans", system-ui, sans-serif;
}

♿ Accessibility

• Choose readable typefaces for body text; avoid decorative fonts for long paragraphs.
• Provide fallbacks so text remains legible if a custom font fails to load.
• Do not use font choice alone to convey meaning or status.
• Test loaded web fonts for clarity at small sizes and high zoom levels.
• Respect user font settings by using relative sizes and sensible system fallbacks.

💡 Best Practices