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. User Avatar
    Permalink to comment#

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


  2. User Avatar

    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. User Avatar
    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.

    • User Avatar
      Permalink to comment#

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

  4. User Avatar
    Permalink to comment#

    Ok kool thanks

Leave a Comment

Posting Code!

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.