Font family

Learn the font-family property and fallback fonts.

Font family

The font look of text on a web page is set by the font-family property. The name you write in a declaration tells the browser which font to use when drawing that text.

Writing only one font is risky: if the visitor's system does not have it, the browser falls back to a default. So you write a font stack with several names; the browser uses the first one it finds, from left to right.

At the end of the stack you add a generic family name such as serif, sans-serif or monospace.

Web-safe fonts

Some fonts exist on almost every device; these are called web-safe fonts. Arial, Helvetica, Georgia, Times New Roman, Verdana and Courier New belong to this group.

Even so, to stay safe you always add a fallback and end with a generic family name. For example, font-family: "Segoe UI", Arial, sans-serif; falls back from Segoe UI to Arial, then to the sans-serif family.

Exercise Set the font family for body

Open a declaration block for the body selector. Give the font-family property a stack that starts with a specific font name, includes at least one fallback, and ends with the sans-serif generic family.

Show example solution

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

Test yourself

Which font-family declaration starts with a specific name and builds a safe stack with fallbacks?
- font-family: serif, sans-serif, monospace;
- font-family: "Segoe UI", Arial, sans-serif;
- font-family: sans-serif;
- font-family: "Segoe UI";
Show answer

font-family: "Segoe UI", Arial, sans-serif; — Correct. The stack starts with a specific name, follows with similar fallbacks and ends with a generic family name.

Add the fallback

p {
  font-family: "Georgia", ____;
}

Show answer

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

Match each generic family to its role

serif

Classic font with line feet
sans-serif

Line-free modern font
monospace

Each letter equal width
cursive

Handwriting style
Which one is a web-safe font found on almost every device?
- Verdana
- Segoe UI
- SF Pro
- Roboto
Show answer

Verdana — Correct. Verdana is a web-safe font preinstalled on most Windows, macOS and Linux systems.

Next lesson: Font size and weight

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies