CSS font-family Property

The font-family property allows creating a prioritized list of font family names and/or generic family names for the selected element.

We use commas to separate the values and show them as alternatives. The browser will select the first font to use if it is available. However, it may be unavailable in some cases like the user's computer doesn't have that font. When this situation occurs, the browser will try to use the next alternative to show the texts (or even a character which the first font cannot show).

There are two types of font family names:

  1. family-name: It is the name of a font-family such as "times", "courier", "arial", etc.
  1. generic-family:It is the name of a generic-family such as "serif", "sans-serif", "cursive", "fantasy", "monospace".

When the font name has whitespace, it must be enclosed in quotation marks as follows: "Courier New".

When we want to use unique font-family, we need to use @font-face property.
Initial Value Depends on the browser.
Applies to All elements. It also applies to ::first-letter and ::first-line.
Inherited Yes.
Animatable No.
Version CSS1
DOM Syntax object.style.fontFamily = "Verdana,sans-serif";

A list of fonts is specified, from highest to lowest, by the font-family property. In this case, font selection will not stop at the first font of the list. It is done one character at a time. This means that if an available font doesn’t have a glyph for the character that is needed, the recent fonts will be tried.

Syntax

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

Example of the font-family property:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
      }
    </style>
  </head>
  <body>
    <h2>Font-family property example</h2>
    <p>We used "Lucida Grande" font-family for this text.</p>
  </body>
</html>

Values

Value Description Play it
family-name generic-family Prioritized list of font family names and/or generic family names. Play it »
initial Makes the property use its default value. Play it »
inherit Inherits the property from its parents element.
< br />

Browser support

chrome edge firefox safari opera
1.0+ 12.0+ 1.0+ 1.0+ 3.5+

Practice Your Knowledge

What does the 'font-family' property do in CSS?

Quiz Time: Test Your Skills!

Ready to challenge what you've learned? Dive into our interactive quizzes for a deeper understanding and a fun way to reinforce your knowledge.

Do you find this helpful?