Crus4

logo

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|inherit

Now 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

  1. Pingback: CSS Fonts - crus4

Leave a Reply

Your email address will not be published. Required fields are marked *