CSS font-family
CSS font-family is a crucial property in web design that specifies the typeface to be used for text rendering on a web page. It is one of the most essential CSS properties, as it sets the visual tone of the entire page and influences the readability and overall aesthetic of the content.
There are two types of font-family names that can be used in CSS. These are:
- family-name:- It contains the names of a font-family like, “Arial”, “Times”, “Courier”.
- generic-family:- It contains names of a generic font-family, like “serif”, “sans-serif”, “cursive”, “fantasy”, “monospace”.
Syntax
font-family: family-name|generic-family|intial|inheritNow let’s define the Generic Family Categories.
There are five generic font families in CSS. These are:
- Serif:- These types of fonts have a small stroke at the edges of every letter. Fonts such as Times New Roman, Georgia belong to this family.
- Sans-serif:- These types of fonts have clean lines and plane borders. Fonts like Arial, Vedanta belong to this family.
- Cursive:- These types of imitate like a human hand writing. Fonts such as Corsiva, Zapfino belong to this family.
- Monospace:- All the letters in this type of family have the same fixed width. Fonts such as Monaco, SimSun belong to this family.
- Fantasy:- These types of fonts are pretty much stylish. Fonts like Cracked, Critter belong to this family.
Syntax
font-family: family-name|generic-family|initial|inherit; In an Example below let’s write a code to see how you can use generic family fonts in your code.
Example
<html>
<head>
<style>
.p1 {
font-family: "Times New Roman", "Georgia", serif;
}
.p2 {
font-family: "Corsiva", "Zapfino", Cursive;
}
.p3 {
font-family: "Monaco", "SimSun", monospace;
}
</style>
<body>
<h2>CSS font-family</h2>
<p class="p1">This paragraph is shown in the Times New Roman font.</p>
<p class="p2">This paragraph is shown in the Corsiva font.</p>
<p class="p3">This paragraph is shown in the Monaco font.</p>
</body>
</html>
CSS font-family
One thought on “CSS font-family”