CSS font-family property specifies a list of comma-separated fonts for an element.
These fonts are prioritized from left to right. This means that the browser by default will use the first font. If the first font is not available or not supported by the browser, it will use the second one and so on until the end of the list.
There are a few points which we should keep in mind while applying the font-family property:
- Multiple font names must be comma-separated.
- The font list must always end with a generic font family. These generic font families are
serif,sans-serif,monospace,cursive, andfantasy. - If the font name contains any white space, it must be enclosed inside quotes.
Refer to the example below:
Example:
.p1{
font-family: Arial, Helvetica, sans-serif
}
.p2{
font-family: "Times New Roman", Times, serif;
}
CSS Syntax
The font-family property has the following syntax:
font-family: family-name|generic-family|initial|inherit;
Property Values
The font-family property accepts the following values:
| family-name | Specifies the name of the font family. For example, “Times” and “Helvetica” are font families. |
| generic-family | Specifies a generic family name. There are five generic family: ‘serif’, ‘sans-serif’, ‘monospace’, ‘cursive’ and ‘fantasy’. |
| initial | Sets the font-family property to its default value. The default value depends on the browser. |
| inherit | Inherits the font-family property from the parent element. |
General Info
| Default Value | Browser dependent |
| Inherited | Yes |
| JavaScript Usage | element.style.fontFamily = “Arial, Helvetica, sans-serif”; |
