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