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
Set the font family with CSS
The font-family property is used to change the face of a font. You can specify multiple font names as fallbacks, and the browser will use the first available font from the list.
Syntax
font-family: "font-name", fallback-font, generic-family;
Example: Setting Font Family
<html>
<head>
</head>
<body>
<p style="font-family: georgia, garamond, serif;">
This text is rendered in either georgia, garamond, or the default serif font
depending on which font you have at your system.
</p>
<p style="font-family: 'Times New Roman', Times, serif;">
This paragraph uses Times New Roman with fallbacks.
</p>
<p style="font-family: Arial, Helvetica, sans-serif;">
This paragraph uses Arial with sans-serif fallbacks.
</p>
</body>
</html>
Generic Font Families
CSS provides five generic font families as final fallbacks:
<html>
<head>
</head>
<body>
<p style="font-family: serif;">Serif font (with decorative strokes)</p>
<p style="font-family: sans-serif;">Sans-serif font (clean, modern)</p>
<p style="font-family: monospace;">Monospace font (fixed-width)</p>
<p style="font-family: cursive;">Cursive font (script-like)</p>
<p style="font-family: fantasy;">Fantasy font (decorative)</p>
</body>
</html>
Best Practices
Always include a generic font family as the final fallback. Use quotes around font names that contain spaces. List fonts in order of preference from most specific to most general.
<html>
<head>
<style>
.heading {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.body-text {
font-family: Georgia, "Times New Roman", Times, serif;
}
</style>
</head>
<body>
<h2 class="heading">This is a heading with custom font</h2>
<p class="body-text">This is body text with serif font family.</p>
</body>
</html>
Conclusion
The font-family property allows you to control text appearance by specifying preferred fonts with fallbacks. Always include a generic font family to ensure consistent rendering across different systems.
Updated on: 2026-03-15T23:18:59+05:30
480 Views
Advertisements