CSS font-family

The font-family CSS property specifies one or more fonts for an element's text. The first available font from the list is used. Fonts available are those of the operating system and those declared using a @font-face rule. The @font-face rule loads external font files to the browser and makes them available in CSS. The term "font family" refers to a typeface design, including all its style variations: light, bold, italic.

comma-separated
font-family: font-list
font-family: "Courier New", Courier, monospace;

Font names containing spaces like "Times New Roman" must be quoted. The quotes must be single if the rule is within a <style> tag.

Browser Support: Full for the property. Partial for @font-face font file formats. See the caniuse browser support tables for WOFF, EOT, TTF and SVG font files.

Using font-family

When using font-family, specify several font names separated by commas. Start with your prefered font and end with a generic font family. The browser will look for the first font in the operating system and in @font-face rules. If it's unavailable, it will look for the second font and so on.

p.example{
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}

This text will use the first available font from the font-family stack.

Generic Font Families

A generic font family is a keyword that roughly specifies the type of font to use: serif, sans-serif, monospace, fantasy, cursive. Those keywords are mapped to an available font of the respective type. Different fonts may be used for the same family depending on operating system, but there's always a font available for them. It's highly recommended use a generic font family at the end of the font-family list. The five generic font families are:

This is serif, I'm good for print.

This is sans-serif, I'm good for reading on screen.

This is monospace, all my characters have the same width.

This is cursive, I look a bit like handwriting.

This is fantasy. I'm supposed to look playful.

Custom Font Families with @font-face

@font-face is the CSS rule used to include external fonts into a document. @font-face enables loading font files (a.k.a. webfonts) and assigning them a font a name, which can later be used in CSS font-family rules. It's the only way to use any font other than the operating system fonts. Here's an example of @font-face declaring the Open Sans font family:

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans'), local('OpenSans'), url(path_to_font_file.woff) format('woff');
}

The WOFF format is supported by most modern browsers. It may be necessary to include other font files (EOT, TTF and SVG) for old browsers, depending on the audience.

In the context of a @font-face rule, the font-family property sets the name of the font family that is being declared. The same is true for the font-style and font-weight rules in the example. Any element matching those rules will use the provided font file. For example:

p.example{
font-family:"Open Sans",Helvetica,sans-serif;
}

This text will use the first available font in the font-family stack. If a webfont is not available it will jump to the next.

Finding Font Stacks

You don't have to create font lists from scratch. It's a slow process if you start getting picky. Thankfully, there are many font stacks (tested font-family lists of similar fonts) published on the web which you can append to your prefered font.

Note that if you are happy with a generic family you don't even need a font stack. In some cases, one to three fonts are enough to support 99.99% of the users, and the rest can do okay with the generic family.

A few resources to help you build your font family stacks:

  • cssfontstack.com, a website with common fonts and their stacks for copy-pasting, along with support information for the main font.
  • Web Safe Font Stacks, a list of simple safe stacks.

Shorthand for font properties

The CSS font property is a shorthand for font-related properties including font-family. The full syntax is more complex but it's normally used as:

font: font-style font-weight font-size font-family;

Keep in mind that values not provided will be set to initial, and not inherited. To inherit a value you'll have to use the longhand rule set to inherit after the shorthand.

div.bold {
font: italic bold 28px "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
}
The font here is set using the "font" shorthand.

See the font's page for details.

Useful Resources

Leave a Reply

Allowed tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>