CSS font-family Property
Description
The font-family property specifies a prioritized list of font family names or generic family names. Unlike other CSS properties, values are a comma-separated list indicating alternatives. If the font name contains spaces, for example, Trebuchet MS, it must be enclosed in single or double quotes. The user agent will select the first font on the list that is installed on the computer.
- Initial value
- Depends on user agent
- Applies to
- All elements
- Inherited
- Yes
- Computed value
- As specified
- Animatable
- No
- JavaScript syntax
- object.style.fontFamily
Interactive Demo
The rusty swing set creaked a lonely lullaby in the twilight, shadows lengthening like grasping fingers across the dew-kissed grass. A lone dandelion seed, adrift on the breeze, whispered secrets of faraway fields, of dandelion suns and galaxies spun from fluff. Somewhere, beyond the veil of dusk, a coyote laughed, echoing through the stillness like a forgotten memory.
Syntax
font-family: [ <family-name> | <generic-family> ] #
Values
- <family-name>The name of a font family of choice such as Helvetica or Verdana. You can reference fonts available on the users system, or external fonts imported using @font-face. When the font name contains more than one word, it should be enclosed in quotes, for example "Times New Roman".
- <generic-family>The following generic family keywords are defined: 'serif', 'sans-serif', 'cursive', 'fantasy', and 'monospace'. These keywords can be used as a general fallback mechanism when an author's desired font choices are not available. As keywords, they must not be quoted. Authors are encouraged to append a generic font family as a last alternative for improved robustness.
- inherit
Example
<p class="times">The paragraph displayed in the font "Times New Roman". </p>
<p class="courier">The paragraph displayed in the font "Courier". </p> .times {
font-family: "Times New Roman", serif;
}
.courier {
font-family: Courier;
}Browser Support
The following table will show you the current browser support for the CSS font-family property.
| Desktop | |||||
 |
 |
 |
 |
 |
|
| 12 | 1 | 1 | 3.5 | 1 | |
| Tablets / Mobile | |||||
|
|
|
|
 |
 |
| 18 | 4 | 10.1 | 1 | 1 | 4.4 |
Last updated by CSSPortal on: 1st January 2024