CSS font-family

View Output Full Screen Preview

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
system-ui
emoji
math
fangsong

These are the keywords that represent 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
Animatable: Discrete

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 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 4 (W3C Working Draft)
CSS Level 2.1 (W3C Recommendation 07 June 2011)
CSS Level 1 (W3C Recommendation 17 Dec 1996)

Browser Support

Browser support for CSS properties can vary, particularly for newer or experimental features. Check current browser compatibility before using a property in production, especially when supporting older browsers.

Initial Value

CSS properties have an initial value that applies when the property has not been explicitly set. The initial value is different from the value inherited from a parent element and may vary between properties.

Inheritance

Some CSS properties inherit their computed value from their parent element by default, while others do not. The inherit, initial, unset, and revert keywords can also be used to control how a property gets its value.

Vendor Prefixes

Most modern CSS properties use the standard, unprefixed syntax. Vendor-prefixed properties such as -webkit- are mainly relevant to older browser versions or specific features and should only be used when required by your browser support targets.