CSS font-family Property
Topic: CSS3 Properties ReferencePrev|Next
Description
The 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: serif, sans-serif, monospace, 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 |
| Inherited: | Yes |
| Animatable: | No. See animatable properties. |
| Version: | CSS 1, 2, 3 |
Syntax
The syntax of the property is given with:
The example below shows the font-family property in action.
Example
Try this code »body {
font-family: Arial, Helvetica, sans-serif;
}
h1 {
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.
Property Values
The following table describes the values of this property.
| Value | Description |
|---|---|
| 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-family |
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. |
initial |
Sets this property to its default value. |
inherit |
If specified, the associated element takes the computed value of its parent element font-family property. |
Browser Compatibility
The font-family property is supported in all major modern browsers.
 |
Basic Support—
|
Further Reading
See tutorial on: CSS Fonts, CSS Text.
Related properties and at-rules: font, font-style, font-variant, font-weight, font-size, line-height, @font-face.
