CSS font-family Property

The font-family property allows you to specify 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 if 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 text (or even a character which the first font cannot show).

There are two types of font family names:

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

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

TIP

When we want to use unique font-family, we need to use @font-face rule.

Initial Value	serif
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 priority to lowest fallback, by the font-family property. Font selection does not stop at the first font in the list; it is done one character at a time. This means that if an available font doesn’t have a glyph for a specific character, the browser will try the next fonts in the list.

Syntax

Syntax of CSS font-family Property

css

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

Example of the font-family property:

Example of CSS font-family Property with sans-serif value

html

<!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>

Try it Yourself »

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 parent element.	Play it »

Practice

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

It sets the font of the textIt changes the color of the textIt specifies the alignment of the textAllows the use of a fallback font, in case the specified font is not availableAllows more than one font to be specified

CSS font-family Property ​

Syntax ​

Example of the font-family property: ​

Values ​

Practice ​

CSS font-family Property

Syntax

Example of the font-family property:

Values

Practice