CSS font-family Property
Example
Specify the font for two paragraphs:
p.a {
font-family: "Times New Roman", Times, serif;
}
p.b {
font-family: Arial, Helvetica,
sans-serif;
}
Try it Yourself »
Definition and Usage
The font-family property specifies the font for an element.
The font-family property can hold several font names as a "fallback" system.
If the browser does not support the first font, it tries the next font.
There are two types of font family names:
- family-name - The name of a font-family, like "times", "courier", "arial", etc.
- generic-family - The name of a generic-family, like "serif", "sans-serif", "cursive", "fantasy", "monospace".
Start with the font you want, and always end with a generic family, to let the browser pick a similar font in the generic family, if no other fonts are available.
Note: Separate each value with a comma.
Note: If a font name contains white-space, it must be quoted. Single quotes must be used when using the "style" attribute in HTML.
| Default value: | depends on the browser |
|---|---|
| Inherited: | yes |
| Animatable: | no. Read about animatable |
| Version: | CSS1 |
| JavaScript syntax: | object.style.fontFamily="Verdana,sans-serif" Try it |
Browser Support
The numbers in the table specify the first browser version that fully supports the property.
| Property | |||||
|---|---|---|---|---|---|
| font-family | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 |
CSS Syntax
font-family: family-name|generic-family|initial|inherit;
Property Values
| Value | Description | Demo |
|---|---|---|
| family-name / generic-family | A prioritized list of font family names and/or generic family names | Demo ❯ |
| initial | Sets this property to its default value. Read about initial | |
| inherit | Inherits this property from its parent element. Read about inherit |
Related Pages
CSS tutorial: CSS Font
CSS reference: font property
HTML DOM reference: fontFamily property
