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

HTML

<p class="times">The paragraph displayed in the font "Times New Roman". </p> 

<p class="courier">The paragraph displayed in the font "Courier". </p>

CSS

.times {
   font-family: "Times New Roman", serif; 
}
.courier {
   font-family: Courier;
}

Result

Give it a Try

Click the button below to experiment with this property.

Give it a Try!

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

Support Us