font-family CSS property sets the font face to be used for element's text content. The
font-family property should hold several font names as a "fallback" system. Start with the font that you want first, then any fonts that might fill in for the first if it is unavailable.
You should end the list with a Generic font family, which are five:
cursive and fantasy. The following table summarizes the usages context and the version history of this property.
|Default value:||Depends on the browser|
|Applies to:||All elements|
|Animatable:||No. See animatable properties.|
|Version:||CSS 1, 2, 3|
The syntax of the property is given with:
The example below shows the
font-family property in action.
ExampleTry this code »
font-family: Arial, Helvetica, sans-serif;
font-family: "Times New Roman", Times, serif;
Note: If the name of a font family is more than one word, it must be in quotation marks, like
font-family: "Times New Roman", Serif; etc.
For more commonly used font combinations, please check out CSS web safe fonts.
The following table describes the values of this property.
|family-name||The name of a font family. For example, "Times" and "Helvetica" are font families. Font family names containing whitespace should be quoted.|
Generic font families can be used as a general fallback mechanism when the desired font choices are not available. As generic family names are keywords, they must not be quoted.
A generic font family should be the last alternative in the list of font family names. The following generic families are defined:
Learn more about font combinations.
||Sets this property to its default value.|
||If specified, the associated element takes the computed value of its parent element
font-family property is supported in all major modern browsers.