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.