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
CSS3 font combinations
CSS3 font combinations allow you to specify multiple fonts in order of preference. If the browser cannot load the first font, it automatically tries the next font in the list, ensuring your text always displays properly.
Syntax
selector {
font-family: "first-choice", "second-choice", generic-family;
}
Font Family Categories
| Category | Description | Examples |
|---|---|---|
serif |
Fonts with decorative strokes | Times, Georgia |
sans-serif |
Fonts without decorative strokes | Arial, Helvetica |
monospace |
Fixed-width fonts | Courier, Monaco |
cursive |
Script-like fonts | Brush Script |
fantasy |
Decorative fonts | Impact, Papyrus |
Example: Sans-Serif Font Combination
The following example demonstrates a typical sans-serif font stack −
<!DOCTYPE html>
<html>
<head>
<style>
.sans-serif-text {
font-family: "Helvetica Neue", Arial, "Liberation Sans", sans-serif;
font-size: 18px;
padding: 20px;
background-color: #f5f5f5;
border-radius: 5px;
}
</style>
</head>
<body>
<div class="sans-serif-text">
This text uses a sans-serif font combination. The browser will try Helvetica Neue first, then Arial, then Liberation Sans, and finally any available sans-serif font.
</div>
</body>
</html>
Clean, modern text appears in a light gray box with the best available sans-serif font from the specified list.
Example: Serif Font Combination
Here's how to create a serif font stack for traditional, readable text −
<!DOCTYPE html>
<html>
<head>
<style>
.serif-text {
font-family: "Times New Roman", Times, "Liberation Serif", serif;
font-size: 18px;
line-height: 1.5;
padding: 20px;
background-color: #fafafa;
border-left: 4px solid #333;
}
</style>
</head>
<body>
<div class="serif-text">
This paragraph uses a serif font combination for enhanced readability. The decorative strokes make it ideal for body text and articles.
</div>
</body>
</html>
Traditional-looking text with serif fonts appears in a light box with a dark left border, showing improved readability.
Best Practices
- Always end your font stack with a generic family (serif, sans-serif, monospace)
- Put web-safe fonts before less common ones
- Use quotes around font names that contain spaces
- Test your font combinations across different browsers and operating systems
Conclusion
CSS3 font combinations provide a reliable fallback system for typography. By listing fonts in order of preference, you ensure consistent text rendering across all devices and browsers.
Updated on: 2026-03-15T11:59:32+05:30
172 Views
Advertisements