Grow your CSS skills. Land your dream job.

font-family

Last updated on:

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

Comments

  1. Karan
    Permalink to comment#

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

    WHY?

Leave a Comment

Posting Code

Markdown is supported in the comment area, so you can write inline code in backticks like `this` or multiline blocks of code in in triple backtick fences like ```this```. You don't need to escape code in backticks, Markdown does that for you.

Sadly, it's kind of broken. WordPress only accepts a subset of HTML in comments, which makes sense, because certainly some HTML can't be allowed, like <script> tags. But this stripping happens before the comment is processed by Markdown (via Jetpack). It seems to me that would be reversed, because after Markdown processes code in backticks, it's escaped, thus safe. If you think you can fix this issue, get in touch!

If you need to make sure the code (typically HTML) you post absolutely posts correctly, escape it and put it within <pre><code> tags.

Current ye@r *

*May or may not contain any actual "CSS" or "Tricks".