Retour au cours

Lesson 26: Typography: Font Families and Fallbacks

**La Maîtrise de CSS : De zéro à expert en 100 leçons** *(Alternative, slightly punchier version using a common French idiomatic structure for full coverage: CSS : Maîtrisez l'essentiel en 100 leçons, but the first option is closer to the original progression.)*

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 FamilyDescription
serifFonts with small lines/flourishes at the ends of strokes (e.g., Times New Roman).
sans-serifFonts without serifs (e.g., Arial, Helvetica). Best for digital screens.
monospaceAll characters have the same width (e.g., Courier). Used for code.
cursiveHandwriting-style fonts.
fantasyDecorative fonts.

Quoting Fonts: If a font name contains spaces (e.g., 'Times New Roman'), it must be enclosed in quotes (single or double).