The font-family property defines the font that is applied to the selected element. The font that is selected is not a single font face, but a "family", and thus may be dependent on other typographic property values to select the correct face within the family.

body {
    font-family: Arial, Helvetica, sans-serif;

A value can be one of the following:

  • A font family name that matches a font that is embedded on the page or available on the user's system.
  • A series of family names, separated by commas, which can include a generic family name

If multiple family names are used, the browser will select the first one it finds either embedded on the page using @font-face or installed on the user's operating system.

For font-family there is no specific default or initial value; the initial value always depends on the browser and/or operating system.

Generic Family Names

If multiple values are used for a single declaration, it is recommended to have a generic family listed last as a fallback to ensure the best typographic experience:

code {
    font-family: Courier, Monaco, monospace;

In the above example, "Courier" and "Monaco" are real family names of actual fonts, whereas "monospace" is just a generic reference to any font installed on the user's system that's monospaced.

If the first two are not found installed, the browser will select the best option, but only from monospace fonts. Without the generic family, the font would default to whatever is the default font on the user's system (likely a serif or sans-serif), which would be undesirable.

Generic family names include serif, sans-serif, cursive, fantasy, and monospace.

If a family name matches a generic family name, the family name should be quoted to indicate that it is not generic.

Multi-word Family Names

If a family name contains multiple words, separated by spaces, it is recommended to list the family name in quotation marks (single or double):

code {
    font-family: "Times New Roman", Georgia, serif;

This isn't always necessary, but it is generally safer to include the quotes for any family name that has spaces or special characters.

Related Properties

Other Resources

Browser Support

Chrome Safari Firefox Opera IE Android iOS
Works Works Works Works Works Works Works


  1. Karan
    Permalink to comment#

    “it is recommended to list the family name in quotation marks (single or double)”


  2. dago

    Very interesting. Chromium (37 version) don’t require separate family names by commas, therefore font-family:”ubuntu mono”,”Liberation Sans”,”serif”; = font-family:”ubuntu mono” “Liberation Sans” “serif”; PS. Firefox (also 37 version) works correctly only when a series of family names, separated by commas.

  3. Faoud
    Permalink to comment#

    Recommended explanation of why quotes are used on the font family values.In the second paragraph of the Generic Family Names under the picture, the author should go a bit more in depth in his/her explanation for a beginner of CSS doing research.

    • Louis
      Permalink to comment#

      There’s no reason for those quotes, I just used them to reference what was put in the example.

  4. Faoud
    Permalink to comment#

    Ok kool thanks

Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences like this:

  function example() {
    element.innerHTML = "<div>code</div>";

We have a pretty good* newsletter.