/    /  CSS font-family

CSS font-family

 

There are two types of font-family:

  • family-name: Name of the font-family – “Courier”, “Arial”, “Times”, etc.
  • generic-family: Name of the generic family that provides five categories, which are “serif”, “sans-serif”, “cursive”, “fantasy”, and “monospace”.

 

The generic-family categories:

  • serif – Writing the text for printing, such as books, magazines, and newspapers, etc.
  • sans-serif – It is a modern, formal, and simple style.
  • cursive – It is mostly used for writing the invitation letter, informal messages, etc.
  • monospace – It is for instructions, mailing addresses, and typewritten text, etc.
  • fantasy – The text expressive, decorative, and impactful.

 

Syntax:

 

font-family: family-name|generic-family|initial|inherit;

 

Values of the font-family property:

 

  • family-name/generic-family: It is the list of font-family and generic family names.
  • initial: Set the property to its default value.
  • inherit: Property from its parent element.

 

Example:

 

<!DOCTYPE html>
<html>
<head>
<style>
body{
text-align:center;
}
h1.a {
 font-family: "Times New Roman", Times, serif;
 color:Red;
}

h2.b {
 font-family: Arial, Helvetica, sans-serif;
 color:blue;
}
</style>
</head>
<body>
<h1>The font-family Property</h1>

<h1 class="a">Hello i2tutorials :) :)</h1>

<h2 class="b">Welcome to the i2tutorials</h2>

</body>
</html>

 

OUTPUT:

 

CSS font-family