Skip to main content

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:

  • 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.

Sintax​

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

where:

  • 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.

Example:

<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">Second Hello World!</h2>
    </body>
</html>

Output:

Example font-family

Table of Contents