26. Typography: Font Families and Fallbacks
Typography is critical for readability and design aesthetics. The font-family property specifies the typeface used for text.
Defining Font Families
Font family values can be specific font names or generic family names.
css body { font-family: Arial, Helvetica, sans-serif; }
h1 { font-family: 'Times New Roman', serif; }
The Fallback System
It is vital to provide a comma-separated list of fonts. The browser attempts to load the first font in the list. If that font is not available on the user's system, it moves to the second, and so on.
The Crucial Last Font: The list must end with a generic font family keyword. This ensures that even if no specific font loads, the text remains readable.
| Generic Family | Description |
|---|---|
serif | Fonts with small lines/flourishes at the ends of strokes (e.g., Times New Roman). |
sans-serif | Fonts without serifs (e.g., Arial, Helvetica). Best for digital screens. |
monospace | All characters have the same width (e.g., Courier). Used for code. |
cursive | Handwriting-style fonts. |
fantasy | Decorative fonts. |
Quoting Fonts: If a font name contains spaces (e.g., 'Times New Roman'), it must be enclosed in quotes (single or double).