A generic font is a broad font-family name such as serif or sans-serif. Think of it as asking for a kind of outfit rather than one particular shirt: the browser picks an available font that fits the category. section 4.3
CSS provides five generic font families:
- serif section 4.3
- sans-serif section 4.3
- monospace section 4.3
- cursive section 4.3
- fantasy section 4.3
Use a generic family directly when you want a broad type style. For example, headings can use sans-serif while paragraphs use serif through the font-family property. section 4.3
A fallback for a named font
Put a generic font after a specific font name. The browser uses Lato for paragraph text when it loads; otherwise, sans-serif gives it a sensible backup style. section 18.6
p {
font-family: Lato, sans-serif;
}
This rule places the named Lato font first and the generic sans-serif family second, so the latter can display if the third-party font file fails to load. section 18.6
The same fallback idea is useful with hosted or self-hosted fonts: a generic font name keeps text styled even when a chosen font is unavailable. section 18.9 section 18.6
