View video tutorial

CSS Font Family

CSS

This property is used to provide a list of font families.

CSS font-family

This CSS property is used to provide a comma-separated list of font families.

This property can contain multiple font names as a fallback system, if one font is unsupported in the browser, others can be used.

There are two types of font-family names in CSS:

  1. font family name: Arial, New Times Roman etc. Each font family name must belongs to one of the following generic families.
  2. generic family name:
    • serif
    • sans-serif
    • cursive
    • monospace
    • fantasy

Multiple font names are provided as a fallback system if one is unsupported, then the next can be used.

The generic family name of the font must be placed last in the list of font family names.

Example

#p1 {
  font-family: "Times New Roman", Times, serif;
  color: Red;
}
#p2 {
  font-family: Arial, Helvetica, sans-serif;
  color: blue;
}
Try it Now »

Click on the "Try it Now" button to see how it works.