🔤 CSS font-family: Choosing the Perfect Typeface for Your Website
Typography shapes how your content is perceived. The CSS font-family property is the core tool for specifying which fonts your website uses, defining the personality, readability, and accessibility of your text.
🧾 What is font-family?
The font-family property specifies a priority list of fonts (called a “font stack”) for the browser to use when rendering text. The browser will use the first font available on the user’s system, falling back to the next font if the first is unavailable.
🧬 Syntax
selector {
font-family: family-name, generic-family;
}
family-name: The name of a specific font (e.g.,"Arial","Times New Roman","Roboto").generic-family: A generic font family as a fallback (e.g.,serif,sans-serif,monospace,cursive,fantasy,system-ui).
🎯 Example
body {
font-family: "Open Sans", Arial, Helvetica, sans-serif;
}
How this works:
- Browser tries to load Open Sans first (usually via a web font).
- If unavailable, it tries Arial.
- Then Helvetica.
- Finally, it falls back to any default sans-serif font.
🧠 How It Works
- Fonts listed first have the highest priority.
- Quotation marks are required for font names with spaces or special characters (e.g.,
"Times New Roman"). - Generic families cover broad categories to ensure legibility even if none of the specific fonts are available.
- You can combine system fonts with web fonts for better performance and reliability.
🛠️ Tips & Best Practices
- Always include at least one generic family as a last fallback.
- Use web fonts (Google Fonts, Adobe Fonts, etc.) for consistent branding across devices.
- Group fonts by similar style to maintain design integrity across fallbacks.
- Use quotes for font names with spaces or special characters.
- For better performance, consider the user’s system fonts or font-display strategies.
Common Generic Font Families
| Generic Family | Description | Example Fonts |
|---|---|---|
serif | Fonts with small strokes on ends | Times New Roman, Georgia |
sans-serif | Clean, stroke-free fonts | Arial, Helvetica, Verdana |
monospace | Fixed-width fonts | Courier New, Consolas |
cursive | Handwritten or script fonts | Comic Sans MS, Brush Script |
fantasy | Decorative display fonts | Impact, Papyrus |
system-ui | Default system user interface font | Varies by OS |
✅ Browser Support
Fully supported across all browsers:
- ✅ Chrome
- ✅ Firefox
- ✅ Safari
- ✅ Edge
- ✅ Internet Explorer 6+
🔚 Conclusion
The font-family property is your first step to beautiful, readable, and on-brand typography. Craft your font stack carefully to ensure your website looks great no matter where it’s viewed.