font-family
The font-family property specifies the typeface for text. You can list multiple fonts as a fallback stack, ending with a generic family. System fonts are fast; web fonts are stylish but require loading.
Font Family Stack
CSS
/* Font stack: primary font, fallbacks, generic family */
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
/* Single font with generic family */
.heading {
font-family: Georgia, serif;
}
/* Monospace for code */
code {
font-family: 'Courier New', Courier, monospace;
}Generic Font Families
Family | Description | Examples |
|---|---|---|
serif | Decorative strokes at ends | Georgia, Times New Roman |
sans-serif | No decorative strokes | Arial, Helvetica, Verdana |
monospace | Fixed width, all letters same | Courier, Consolas |
cursive | Script-like, handwriting | Comic Sans, Brush Script |
fantasy | Decorative, stylized | Impact, Papyrus |
CSS
/* Common font stacks */ /* Default sans-serif */ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif; /* Serif for reading */ font-family: 'Georgia', 'Garamond', serif; /* Monospace for code */ font-family: 'Courier New', 'Courier', monospace; /* Web font with fallback */ font-family: 'Open Sans', 'Trebuchet MS', sans-serif;
Web Fonts vs System Fonts
Type | Speed | Consistency | Use Case |
|---|---|---|---|
System fonts | Fast | Varies by OS | Body text, performance |
Web fonts | Slower | Consistent | Branding, distinctive design |
Note
Font-family defines the typeface. Use a fallback stack ending with a generic family. System fonts are fast; web fonts need loading.
Next
Font size: [font-size](/css/font-size).