CSS Reference Property

font-family

The font-family property specifies the font family that is to be used for the content of an element.

More specifically, it defines a prioritized list of font family names and/or generic family names that are to be used. The font family names specified are separated by commas, indicating that they are alternatives to each other. The browser will select the font from the list that is installed on the computer, or that can be downloaded using the information provided by an @font-face at-rule.

For example:

font-family: Helvetica, Verdana, sans-serif;

The browser will first apply the first family name specified in the list. If it is invalid or does not exits or if it fails to load the specified font, it tries to apply the second one, then the third, and the fourth, till the end of the list. If none of the specified font families are available, the browser falls back to the default font specified in the system. In the above example, if Helvetica is available it will be used when rendering. If neither Helvetica nor Verdana is present, then the browser-defined sans serif font will be used.

There are two types of font family names: font family names and generic family names.

A font family name is a name of an actual font, such as “Helvetica”, “Arial”, “Times New Roman”, “Open Sans”, “Lato”, etc.

Font family names must either be given quoted as strings, or unquoted as a sequence of one or more identifiers. This means most punctuation characters and digits at the start of each token must be escaped in unquoted font family names. For example, the following declarations are invalid:
```
font-family: Red/Black, sans-serif;
font-family: "Lucida" Grande, sans-serif;
font-family: Ahem!, sans-serif;
font-family: test@foo, sans-serif;
font-family: #POUND, sans-serif;
font-family: Hawaii 5-0, sans-serif;
                        
```
To avoid mistakes in escaping, if a family name contains multiple words, separated by spaces, digits, or punctuation characters other than hyphens, it is recommended to list the family name in quotation marks (single or double):
```
font-family: "New Century Schoolbook", serif;
font-family: "21st Century", fantasy;
                        
```
A generic family name is a name that is usually used as a fallback mechanism, which tells the browser what kind of font family to use in case none of the specified font families are available.

When multiple font family names are specified, designers are encouraged to include a generic font family name at the end of the list to provide fallback for when the desired font families are not available.

Generic family names are usually keywords. The following generic family keywords are defined: ‘serif‘, ‘sans-serif‘, ‘cursive‘, ‘fantasy‘, and ‘monospace‘.

Since generic family names are keywords, they must not be quoted. In the above example, “serif” and “fantasy” are both generic family names provided at the end of the list, unquoted.

Trivia & Notes

Font family names that happen to be the same as a generic keyword value (“inherit”, “serif”, “sans-serif”, “monospace”, “fantasy”, and “cursive”) must be quoted to prevent confusion with the keywords with the same names.

The browser chooses the font family on a character basis—the browser iterates through the list of family names until it matches an available font that contains a glyph for the character to be rendered. This means that if a font family does not contain a representation (or glyph) for a certain character, the browser will move on to the next font in the list and then the next one until it finds a glyph for that character in any of those fonts, and then it renders the character. The font selection mechanism merely provides a way to determine the “closest” substitute when substitution is necessary.

A font family defines a set of faces that vary in weight, width or slope. CSS uses the combination of a family name with other style attributes to select an individual face. Using this selection mechanism, rather than selecting a face via the style name as is often done in design applications, allows some degree of regularity in textual display when fallback occurs.

Official Syntax

Syntax:

font-family: [ <family-name> | <generic-family> ] #

Initial: browser-dependent
Applies To: all elements
Animatable: no

Values

<family-name>

The name of a font family of choice, such as ‘Helvetica’ or ‘Verdana’ or ‘Open Sans’.

<generic-family>

The following generic family keywords are defined: ‘serif‘, ‘sans-serif‘, ‘cursive‘, ‘fantasy‘, and ‘monospace‘.

Generic font families are a fallback mechanism, a means of preserving some of the style sheet author’s intent in the worst case when none of the specified fonts can be selected. For optimum typographic control, particular named fonts should be used in style sheets.

All five generic font families are defined to exist in all CSS implementations (they need not necessarily map to five distinct actual fonts). User agents should provide reasonable default choices for the generic font families, which express the characteristics of each family as well as possible within the limits allowed by the underlying technology.

serif

Serif fonts represent the formal text style for a script. This often means but is not limited to glyphs that have finishing strokes, flared or tapering ends, or have actual serifed endings (including slab serifs). Serif fonts are typically proportionately-spaced. They often display a greater variation between thick and thin strokes than fonts from the ‘sans-serif’ generic font family.

sans-serif

Glyphs in sans-serif fonts, as the term is used in CSS, are generally low contrast (vertical and horizontal stems have the close to the same thickness) and have stroke endings that are plain — without any flaring, cross stroke, or other ornamentation. Sans-serif fonts are typically proportionately-spaced. They often have little variation between thick and thin strokes, compared to fonts from the ‘serif’ family.

cursive

Glyphs in cursive fonts generally use a more informal script style, and the result looks more like handwritten pen or brush writing than printed letterwork. CSS uses the term ‘cursive’ to apply to a font for any script, although other names such as Chancery, Brush, Swing and Script are also used in font names.

fantasy

Fantasy fonts are primarily decorative or expressive fonts that contain decorative or expressive representations of characters.

monospace

The sole criterion of a monospace font is that all glyphs have the same fixed width. This is often used to render code snippets.

Examples

The following are all valid font family declarations:

font-family: "Arial";
font-family: "Open Sans", sans-serif;
font-family: "Helvetica", Verdana, sans-serif;
font-family: "21st Century", fantasy;

Live Demo

Have a look at the live demo:

View this demo on the Codrops Playground

Browser Support

The font-family property works in all major browsers: Chrome, Firefox, Safari, Opera, Internet Explorer, and on Android and iOS.