CSS font-family

The CSS font-family property allows you to specify a prioritized list of font family names (for example, Times or Arial) and/or generic family names (for example, serif or sans-serif).

When using the font-family property, the user's browser will display the text using the first available font that you specify. If none are available, it will use the default browser font.

If a font name contains white space, digits, or punctuation characters (other than hyphens), it's recommended that you surround it with single or double quotes (for example, "Times New Roman" or 'Times New Roman'). While this is not an absolute requiirement, it can help ensure that there are no mistakes in escaping, and the correct font is used.

You can also use quotes on font names that don't have spaces (for example, 'Helvetica'), but again, this is optional.

However, you should always use quotes on font names that happen to have the same name as a generic font. For example, if a font is called fantasy, you should quote it (i.e. 'fantasy') in order to prevent confusion with the keyword of the same name. The same applies if using a font with a name of initial or default. And, although the current specification doesn't explicitly state it, it makes sense to quote any font names that match any of the CSS-wide keywords (i.e. inherit, initial, and unset).

Tip: Use the font property to set the most common font properties in one go.

Syntax

font-family: [ <family-name> | <generic-family> ] #

Possible Values

family-name
This is the name of the font family of choice. Some examples might include Helvetica, Arial, 'Open Sans', Garamond, Raleway, etc.
generic-family

The following generic font-families are defined:

  • serif
  • sans-serif
  • cursive
  • fantasy
  • monospace

These are the keywords that represent five different generic font families. Most fonts fit clearly into one of these categories. The user's browser will be able to match an available font to the generic family that you specify.

For example, if you specify sans-serif, a Mac browser might use Helvetica, Windows might use Arial, and Android might use Roboto. However, this will depend on the user's preferences too. A Mac user might have set Lucida Grande to be the browser's default sans-serif font, so that will be used instead.

In addition, all CSS properties also accept the following CSS-wide keyword values as the sole component of their property value:

initial
Represents the value specified as the property's initial value.
inherit
Represents the computed value of the property on the element's parent.
unset
This value acts as either inherit or initial, depending on whether the property is inherited or not. In other words, it sets all properties to their parent value if they are inheritable or to their initial value if not inheritable.

General Information

Initial Value
Depends on the user agent.
Applies To
All elements
Inherited?
Yes
Media
Visual

Example Code

h1 {
  font-family: 'Zapf-Chancery', cursive;
  }
p {
  font-family: 'Open Sans', 'Helvetica', sans-serif;
  }

Official Specifications