Fonts & Font Families | CSS Typography Tutorial

CSS Fonts & Font Families

CSS lets you control the typeface used to display text on a web page. The font-family property specifies one or more fonts that the browser can use, allowing you to provide alternatives when a preferred font is unavailable.

The font-family Property

The CSS font-family property specifies the font used to display text. It can be applied to the entire document or to individual HTML elements.

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

This rule asks the browser to display text using Arial. If Arial is unavailable, the browser uses an available font from the generic sans-serif family.

p {
  font-family: Georgia, serif;
}

This rule applies Georgia to paragraphs and provides serif as a fallback.

Font Families

A font family is a collection of related typefaces designed to share a common appearance. CSS uses the font-family property to identify which family should be used to display an element's text.

Fonts such as Arial, Georgia, Verdana, and "Times New Roman" are examples of named font families. Whether a particular font can be displayed depends on whether it is available to the browser.

h2 {
  font-family: Georgia, serif;
}

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

Browser Result

This heading uses Georgia.

This paragraph uses Arial.

Generic Font Families

CSS provides generic font family names that describe a broad style of typeface rather than one specific font. The browser chooses an available font that belongs to the requested generic family.

Generic Family	Description
`serif`	Fonts with decorative strokes or finishing details on many characters.
`sans-serif`	Fonts without traditional serif strokes, generally producing a simpler appearance.
`monospace`	Fonts in which characters generally occupy the same horizontal width.
`cursive`	Fonts designed to resemble handwritten or script-style lettering.
`fantasy`	Decorative fonts intended primarily for display text.

A generic family is commonly placed at the end of a font list so the browser still has an appropriate category of font to use if the named fonts are unavailable.

Font Stacks and Fallback Fonts

The font-family property can contain several font families separated by commas. This list is commonly called a font stack.

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

The browser checks the list from left to right. It uses Arial when available. If Arial is unavailable, it tries Helvetica. If neither named font is available, the browser chooses a font from the generic sans-serif family.

Providing fallback fonts helps text remain readable and keeps the general appearance of the page reasonably consistent across different systems.

Font Family Names with Spaces

Font family names containing spaces should be enclosed in quotation marks.

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

The quotation marks identify "Times New Roman" as one font family name. Generic family names such as serif and sans-serif are written without quotation marks.

Fonts and Inheritance

The font-family property is inherited by default. This means that child elements generally use the font family assigned to their parent unless another CSS rule specifies a different font.

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

h1 {
  font-family: Georgia, serif;
}

Most text on the page inherits Arial from the <body> element, while the <h1> uses Georgia because it has its own font-family declaration.

Setting a primary font stack on the <body> element is a common way to establish the default typography for a page.

Choosing Fonts for a Web Page

Choose fonts that are easy to read and appropriate for the content. Decorative fonts can work well for short headings, but they may become difficult to read when used for long paragraphs or small text.

When using fonts that depend on being installed on the visitor's device, provide suitable fallback fonts. If a particular font must be supplied with the website rather than relying on installed fonts, it can be loaded as a web font.

The next tutorial explains how web fonts allow a website to provide font files for the browser to use.

When to Use font-family

Use font-family whenever you want to control the typeface used for text. A site may define one font stack for most body text and another for headings, navigation, or other elements that need a different appearance.

Always include sensible fallback choices so the content remains readable when the preferred font is unavailable.

Summary

The CSS font-family property controls which typeface is used to display text. A font stack can contain several named fonts followed by a generic family such as serif, sans-serif, or monospace, giving the browser alternatives when a preferred font is unavailable.

The next tutorial covers Web Fonts, which allow font files to be provided by a website instead of relying only on fonts installed on the visitor's device.