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
- Media
- Visual
- Computed value
- As specified
- Animatable
- No
- CSS Version
- CSS1, CSS2, CSS3
- JavaScript syntax
- object.style.fontFamily
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;
}
Give it a Try
Click the button below to experiment with this property.
Browser Support
Desktop | |||||
3 | 12 | 1 | 1 | 3.5 | 1 |
Tablets / Mobile | |||||
![]() |
|||||
1 | 18 | 4 | 10.1 | 1 | 1.0 |
Last updated by CSSPortal on: 1st November 2019