font-family property allows you to specify a prioritized list of font family names (for example,
Arial) and/or generic family names (for example,
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
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.
Tip: Use the
font property to set the most common font properties in one go.
- This is the name of the font family of choice. Some examples might include
The following generic font-families are defined:
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 Grandeto 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:
- Represents the value specified as the property's initial value.
- Represents the computed value of the property on the element's parent.
- This value acts as either
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.
- Initial Value
- Depends on the user agent.
- Applies To
- All elements