Font Families and Web Fonts
The café's designer picked a warm serif called Lora for headings. On her laptop it looks perfect. On a customer's phone, where Lora is not installed, the browser needs to know what to use instead. A font stack is that plan.
The rule
List fonts in order of preference, and always end with a generic family.
font-family takes a comma-separated list. The browser walks it left to right and uses the first font it actually has, deciding character by character:
h1,
h2,
h3 {
font-family: "Lora", Georgia, serif;
}
body {
font-family: system-ui, sans-serif;
}- Specific names first:
"Lora", then a widely installed near-match,Georgia. Quote names that contain spaces or digits, such as"Source Serif 4"; quoting simple names is allowed too. - A generic family last, never quoted:
serif,sans-serif,monospace,cursive, orsystem-ui(the device's own interface font). The browser always has something for these, so text never falls back to a surprise. Writing"serif"in quotes asks for a font literally named serif, which is not the same thing.
font-family is inherited: set it on body and every element inside uses it unless a rule says otherwise.
Web fonts let you send the font with the page instead of hoping it is installed. A service such as Google Fonts gives you a link for the head:
<link rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Lora:wght@400;700&display=swap">That stylesheet contains @font-face rules pointing at the font files. You can also download the files and write @font-face yourself, which avoids a request to a third-party server. Either way, load only the weights you use; each one is another file to download. The display=swap part tells the browser to show text in the fallback font immediately and swap in Lora when it arrives, so nobody stares at invisible text.
The shortcut
Build every stack in three slots: the font you want, a close common substitute, a generic family. Then read it as the browser would: "Have I got the first? No? The second? No? Then the generic."
Read the stack
"Lora", Georgia, serif.
Drills
Answer fast — trust the rule.
With font-family: "Lora", Georgia, serif;, which font is used on a computer that has Georgia but not Lora, with no web font loaded?
Which stack is written correctly?
Why should the generic family never be quoted?
What does display=swap in a Google Fonts link do?
Remember
- A stack lists fonts in preference order; the browser uses the first it has.
- Three slots: wanted font, common substitute, unquoted generic family.
- Web fonts arrive by
linkor@font-face; load only the weights you use.