Font Selection is Important
How readers experience a website depends heavily on the font you pick.
A well-chosen font can also give a brand a strong identity. Aim for one that is easy to read, and give it a color and size that work well.
The CSS font-family Property
An element's font is set with the font-family property.
Tip: List several font names, separated by commas, so they act as a fallback system: a browser without support for the first font moves on to the next.
Put the font you actually want first and a generic family last, which lets the browser pick something similar when nothing else on the list is available.
Note: A font name of more than one word, such as "Times New Roman", goes inside quotation marks.
Example
Each paragraph has its own font-family stack.
<style> block, make three paragraph classes: p1 with "Times New Roman", Times, serif; p2 with Arial, Helvetica, sans-serif; and p3 with "Lucida Console", "Courier New", monospace. Add a paragraph of each class.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.p1 {
font-family: "Times New Roman", Times, serif;
}
.p2 {
font-family: Arial, Helvetica, sans-serif;
}
.p3 {
font-family: "Lucida Console", "Courier New", monospace;
}
</style>
</head>
<body>
<p class="p1">This is a paragraph, shown in the Times New Roman font.</p>
<p class="p2">This is a paragraph, shown in the Arial font.</p>
<p class="p3">This is a paragraph, shown in the Lucida Console font.</p>
</body>
</html>
CSS Generic Font Families
Five generic font families exist in CSS:
- Serif — a small stroke finishes each letter's edges, which feels formal and elegant.
- Sans-serif — clean lines without strokes make for a modern, minimal look.
- Monospace — a fixed width shared by every letter looks mechanical.
- Cursive — the letters imitate human handwriting.
- Fantasy — the fonts are decorative and playful.
Any font name you meet belongs to one of these families.
Difference Between Serif and Sans-serif Fonts
Note: Serif fonts are considered harder to read on computer screens than sans-serif fonts.
Some Font Examples
A few font names from each generic family:
- Serif — for example Times New Roman, Georgia and Garamond.
- Sans-serif — for example Arial, Verdana and Helvetica.
- Monospace — for example Courier New, Lucida Console and Monaco.
- Cursive — for example Brush Script MT and Lucida Handwriting.
- Fantasy — for example Copperplate and Papyrus.