CSS font-family

<!doctype html>
<title>Example</title>
<style>
  h1 {
    font-family: Raleway, "Open Sans", sans-serif;
  }
  p {
    font-family: fantasy, cursive, serif;
    font-size: 1.6em;
  }
</style>
<h1>Tortor Condimentum</h1>
<p>Auctor augue mauris augue neque gravida in fermentum. Euismod elementum nisi quis eleifend.</p>

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

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

What is a font family?

A font family is the typeface that's applied to the text. Every typeface is a collection of glyphs, each of which represents an individual letter, number, punctuation mark, or other symbol. Each font of a typeface has a specific weight, style, condensation, width, slant, italicization, and ornamentation.

Although the terms "font" and "font family" have slightly different meanings ("font" is more specific than "font family"), they are often used interchangeably in web design circles.

Why do I need to choose multiple fonts?

There are many thousands of different fonts available for modern day computers. Most computers come pre-installed with a variation of fonts already, however, it's unrealistic to expect the user's computer to have all fonts ever made. Most computers would have no more than say, 200 or 300 fonts installed.

When we use the font-family property, we rely on the user's computer to have the font that we specify. If we specify a font called say, Roboto, the user can only use it if it's installed on their computer. As explained, it's unrealistic to expect all users to have our preferred font, so we need to put measures in place to ensure that their computer picks a font that looks roughly similar to our preferred font.

This is why it's recommended to provide a list of font families when using the font-family property. If our first choice font isn't available, the second will be used. If that's not available, the third will be used, and so on.

The `@font-face` rule

You can also use the @font-face at-rule to instruct the user's computer to download the font if it's not available. Doing this will ensure that most users do have your first choice font (it will be installed if they don't have it). However, as with all things on the web, there's still no 100% guarantee that the font will work on their computer, so you should always provide a "worst case scenario" font. This "worst case scenario" font should be one of the five generic font families: serif, sans-serif, cursive, fantasy, or monospace. Most fonts will fit perfectly into one of these categories, so you simply need to pick the most appropriate one for your preferred font.

Official Specifications

CSS Fonts Module Level 3 (W3C Candidate Recommendation 3 October 2013)
CSS Level 2.1 (W3C Recommendation 07 June 2011)
CSS Level 1 (W3C Recommendation 17 Dec 1996)