CSS font-family

This CSS property is used to provide a comma-separated list of font families. It sets the font-face for the text content of an element. This property can hold multiple font names as a fallback system, i.e., if one font is unsupported in the browser, then others can be used. The different font-family is used for making attractive web pages.

There are two types of font-family names in CSS, which are defined below:

family-name: It is the name of the font-family such as "Courier", "Arial", "Times", etc.
generic-family: It is the name of the generic family that includes five categories, which are "serif", "sans-serif", "cursive", "fantasy", and "monospace". It should be placed at last in the list of the font family names.

Let's define the generic-family categories.

serif: It is mainly used when we are writing the text for printing, such as books, magazines, newspapers, etc. It includes the font-family such as Georgia, Garamond, Times New Roman, Minion, and many more.

sans-serif: It is a modern, formal, and simple style. It is widely used but most often in the digital form of text. It includes the font-family that are Arial, Calibri, Verdana, Futura, Lato, and many more.

cursive: It is mainly used for writing the invitation letter, informal messages, etc. It is like a handwritten text which is written by a pen or a brush. The font-family that it includes is Insolente, Corsiva, Flanella, Belluccia, Zapfino, and many more.

monospace: It is for instructions, mailing address, typewritten text, etc. It includes the font-family that is Monaco, SimSun, Courier, Consolas, Inconsolata, and many more.

fantasy: It makes the text expressive, decorative, and impactful. It includes the font-family that is Impact, Copperplate, Cracked, Critter, and many more.

Syntax

Values

Let's see the values of the font-family property.

family-name/generic-family: It is the list of font-family names and the generic family names.

initial: It is used to set the property to its default value.

inherit: It is used to inherit the property from its parent element.

Let's understand it by using an illustration.

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 World :) :)</h1>

<h2 class="b">Welcome to the javaTpoint.com</h2>

</body>
</html>

Test it Now

Next TopicCSS font-weight

← prev next →