font-family chooses the typeface. You give it a list, in order of preference. The browser uses the first one that is available on the visitor’s device.
index.html
HTML
<style>
.a { font-family: Georgia, "Times New Roman", serif; }
.b { font-family: Arial, Helvetica, sans-serif; }
.c { font-family: "Courier New", monospace; }
p { font-size: 20px; margin: 6px 0; }
</style>
<p class="a">Georgia, with serif fallbacks.</p>
<p class="b">Arial, with sans-serif fallbacks.</p>
<p class="c">Courier New, with monospace fallback.</p>The parts of a font stack
- A specific font name, such as
Georgia. - A list of backups in case it is missing.
- A generic family as the last entry:
serif,sans-serif,monospace,cursiveorsystem-ui. The browser always has one of these.
Font names with spaces go in quotes: "Times New Roman".
Generic families at a glance
| Family | Look | Typical use |
|---|---|---|
serif | Small strokes at the ends of letters | Books, editorial text |
sans-serif | Clean, no strokes | Websites, interfaces |
monospace | Every letter the same width | Code |
system-ui | The operating system’s own font | App-like pages |
lightbulb
Set it once on body
Put your main
font-family on body. Everything inside inherits it. Note that form controls do not, by default. See Styling Inputs and Labels.Next: which fonts you can safely count on: Web Safe Fonts.