CSS font-family property

Definition and Usage

The font-family property specifies the font family of the element.

The font-family property can use multiple font names as a "fallback" system. If the browser does not support the first font, it will try the next one. That is, the value of the font-family property is a priority list of font family names or generic family names for an element. The browser will use the first value it can recognize.

There are two types of font family names:

  • Specific series names: the name of a specific font, for example: "times", "courier", "arial".
  • Common font family names: for example: "serif", "sans-serif", "cursive", "fantasy", "monospace"

Tip:Values are separated by commas, and a generic family name should always be provided as the last choice.

Note:Using a specific font family (Geneva) depends entirely on whether the font family is available on the user's machine; this property does not indicate any font download. Therefore, it is strongly recommended to use a generic font family name as a fallback.

See also:

CSS Tutorial:CSS Font

CSS Reference Manual:CSS font property

HTML DOM Reference Manual:font Property

Example

Set font for paragraphs:

p
  {
  font-family:"Times New Roman",Georgia,Serif;
  }

Try It Yourself

CSS Syntax

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

Attribute Value

Value Description
  • family-name
  • generic-family

A priority list of one or more font family names or generic family names for a specific element.

Default Value: depends on the browser.
inherit Specifies that the font family should be inherited from the parent element.

Technical Details

Default Value: not specified
Inheritance: yes
Version: CSS1
JavaScript Syntax: object.style.fontFamily="arial,sans-serif"

TIY Example

Set the text font
This example demonstrates how to set the text font.

Browser support

The numbers in the table indicate the first browser version that fully supports this attribute.

Chrome IE / Edge Firefox Safari Opera
1.0 4.0 1.0 1.0 3.5