Definition:
There are two types of CSS Font Family i.e, generic family and font family. The Generic family like “Serif” and “Monospace” have a similar font family and the font-family like “Times New Roman” and “Arial” have a specific font family.
The font-family property is used to set the text of the font family. It is specified by more than one font family by separating with commas. If your browser does not support the first font, it tries the second font, and so on.
Syntax:
font-family: "Times New Roman", Times, serif;Property Value:
- Arial
- Times New Roman
- Helvetica
- Courier etc.Source Code:
<!DOCTYPE html>
<html>
<head>
<style>
.serif {
border: 3px solid black;
background-color: pink;
font-family: "Times New Roman", Times, serif;
}
.sans-serif {
border: 3px solid black;
background-color: pink;
font-family: Arial, Helvetica, sans-serif;
}
.monospace {
border: 3px solid black;
background-color: pink;
font-family: "Lucida Console", Courier, monospace;
}
</style>
</head>
<body>
<p class="serif">This is a paragraph in the Times New Roman font.</p>
<p class="sans-serif">This is a paragraph in the Arial font.</p>
<p class="monospace">This is a paragraph in the Lucida Console font.</p>
</body>
</html>
Output:
Donate to support writers
You may be interested in the following topics:
- CSS Font Google
- CSS Font Kerning
- CSS Font Weight
- CSS Font Variant
- CSS Font Stretch
- CSS Font Style
- CSS Font Size
- CSS Font Family
- CSS Font (All Properties)