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.

Give it a Try!

Browser Support

Desktop
Explorer Edge Chrome Firefox Opera Safari
312113.51
Tablets / Mobile
Android Chrome Firefox Opera Safari Samsung
118410.111.0

Last updated by CSSPortal on: 1st November 2019