CSS font-family Property

The font-family property specifies the font for an element. The font-family property can hold several font names as a “fallback” system. If the browser does not support the first font, it tries the next font. It includes both generic and specific font names.

The font family can be categorized into 2 types:

family-name: It contains the name of a font-family, such as “Times”, “courier”, “aerial”, etc.
generic-family: It contains the name of a generic family, such as”serif”, “sans-serif”, “cursive”, “fantasy”, ” monospace”.

Syntax:

element_selector {
    font-family: family-name|generic-family|initial|inherit;
}

Property values:

Property	Description
`fonts-name`	Specifies the name of the font in quotes, separated by commas.
`generic-family`	Sets the font of text in an HTML document from the list of available fonts from the font pool.
`initial`	Sets an element’s CSS property to its default value.
`inherit`	Inherits a property to an element from its parent element’s property value.

Note: The font-name can be declared with the single quotes when using the style attribute in the HTML & also it must be quoted when it contains white space.

We will understand the usage of the font-family property by implementing it.

Example: This example illustrates the use of the font-family property.

HTML

<!DOCTYPE html>
<html>

<head>
    <title> CSS font-family Property </title>
    <style>
        .para1 {
            font-family: "Impact", Times, serif;
        }

        .para2 {
            font-family: Arial, Helvetica, sans-serif;
        }
    </style>
</head>

<body>
    <h1>Font-family Property</h1>
    <p class="para1">
        w3wiki in Impact font
    </p>

    <p class="para2">
        w3wiki in Arial font.
    </p>

</body>

</html>

Output:

Example 2: In this example we demonstrates the use of the font-family property to style text with different fonts: Times New Roman, Arial, and Courier New.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, 
                   initial-scale=1.0">
    <title>Font Family Example</title>
    <style>
        .example1 {
            font-family: "Times New Roman", Times, serif;
        }

        .example2 {
            font-family: "Arial", Helvetica, sans-serif;
        }

        .example3 {
            font-family: "Courier New", Courier, monospace;
        }
    </style>
</head>

<body>
    <h1 class="example1">
        This is a heading with Times New Roman
    </h1>
    <p class="example1">
        This is a paragraph with Times New Roman.
    </p>

    <h1 class="example2">
        This is a heading with Arial
    </h1>
    <p class="example2">
        This is a paragraph with Arial.
    </p>

    <h1 class="example3">
        This is a heading with Courier New
    </h1>
    <p class="example3">
        This is a paragraph with Courier New.
    </p>
</body>

</html>

Output:

CSS font-family Property Example Output

Supported Browsers: The browsers that support the font-family property, are listed below:

Contact Us