CSS font-family Property

CSS font-family property specifies a list of comma-separated fonts for an element.

These fonts are prioritized from left to right. This means that the browser by default will use the first font. If the first font is not available or not supported by the browser, it will use the second one and so on until the end of the list.

There are few points which we should keep in mind while applying the font-family property:

  • Multiple font names must be comma-separated.
  • The font list must always end with a generic font family. These generic font families are serif, sans-serif, monospace, cursive, and fantasy.
  • If the font name contains any white space, it must be enclosed inside quotes.

Refer to the example below:

Example:

.p1{
  font-family: Arial, Helvetica, sans-serif
}
.p2{
  font-family: "Times New Roman", Times, serif;
}

CSS Syntax

The font-family property has the following syntax:

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

Property Values

The font-family property accepts the following values:

family-nameSpecifies the name of the font family. For example, “Times” and “Helvetica” are font families.
generic-familySpecifies a generic family name. There are five generic family: ‘serif’, ‘sans-serif’, ‘monospace’, ‘cursive’ and ‘fantasy’.
initialSets the font-family property to its default value. The default value depends on the browser.
inheritInherits the font-family property from the parent element.

General Info

Default ValueBrowser dependent
InheritedYes
JavaScript Usageelement.style.fontFamily = “Arial, Helvetica, sans-serif”;