Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
Usage of font-family property in CSS
The font-family property in CSS specifies the typeface or font family to be used for displaying text. It accepts a prioritized list of font names, allowing fallback options if the preferred font is not available on the user's system.
Syntax
font-family: "font-name", fallback1, fallback2, generic-family;
Font Family Categories
CSS defines five generic font families:
- serif - Fonts with decorative strokes (Times, Georgia)
- sans-serif - Clean fonts without strokes (Arial, Helvetica)
- monospace - Fixed-width fonts (Courier, Monaco)
- cursive - Script-like fonts (Comic Sans, Brush Script)
- fantasy - Decorative display fonts (Impact, Papyrus)
Example: Multiple Font Families
<html>
<head>
<style>
.serif-text {
font-family: Georgia, "Times New Roman", serif;
}
.sans-serif-text {
font-family: Arial, Helvetica, sans-serif;
}
.monospace-text {
font-family: "Courier New", Courier, monospace;
}
</style>
</head>
<body>
<p class="serif-text">
This text uses serif fonts: Georgia, Times New Roman, or default serif.
</p>
<p class="sans-serif-text">
This text uses sans-serif fonts: Arial, Helvetica, or default sans-serif.
</p>
<p class="monospace-text">
This text uses monospace fonts: Courier New, Courier, or default monospace.
</p>
</body>
</html>
Font Names with Spaces
When font names contain spaces, wrap them in quotes:
<html>
<head>
<style>
.custom-font {
font-family: "Times New Roman", "Comic Sans MS", cursive;
}
</style>
</head>
<body>
<p class="custom-font">
Font names with spaces must be quoted.
</p>
</body>
</html>
Best Practices
- Always include a generic family as the final fallback
- List fonts in order of preference
- Use web-safe fonts for better compatibility
- Quote font names containing spaces or special characters
Web-Safe Font Combinations
| Category | Font Stack | Description |
|---|---|---|
| Serif | Georgia, serif | Elegant, readable for long text |
| Sans-serif | Arial, Helvetica, sans-serif | Clean, modern appearance |
| Monospace | "Courier New", Courier, monospace | Code blocks, fixed-width text |
Conclusion
The font-family property provides font flexibility through fallback chains. Always include a generic family as the final fallback to ensure consistent text rendering across different systems.
Updated on: 2026-03-15T23:18:59+05:30
225 Views
Advertisements