In this section, we will learn what the font-family property is and how to use it in CSS.

CSS font-family Property Definition and Usage

The CSS `font-family` property is used to set a font type for an element.

For example, we might want to have a text content to be displayed in “Times” font family. In that case, we can use the `font-family` property and set its value to “times” for the target element. Now, those text content in the target element will be shown with “times” font type.

Usually, we set more than one value for this property. The first value is usually a specific font name, and the second one is a more generic font type.

The reason for using this pattern is that there’s a chance that the target browser might not have the specific font type that we’ve set as the first value of this property! So now, as the backup font, we can set another value (one or more generic font family) to be used in case the first value (the specific font name) wasn’t supported in the target browser.

Basically, browsers check the first value of the `font-family` property and if they have the specified font name, they use that font and ignore the rest of values of this property. But if the first font type wasn’t supported in a browser, it will move to the next value and check to see if it had this font family or not. This process goes on until it finds a font family that it can support.

Note: if a browser cannot support any specified font family of this property, then it will use its default font.

CSS font-family Property Syntax

font-family: family-name|generic-family|initial|inherit;

CSS font-family Property Value

The value of this property is the name of one or more font types.

If we use more than one font type for this property, then we should use comma to separate each value from the other.

Also, if the name of a font has a white space in it, then it should be quoted.

Note: the two global values “initial” and “inherit” could also be used for this property.

Example: font-family in CSS

See the Pen font-family in CSS by Enjoy Tutorials (@enjoytutorials) on CodePen.

How Does CSS font-family Property Work?

Note: if the name of the font has multiple words, we should surround it with a double quote.

Any browser that opens our webpage should already have installed the font type (aka typeface) that we used on the page. If the typeface we used for text content wasn’t installed on the target browser, the browser’s default type will be used in order to render the text content of our page.

CSS Font-stack:

Because we can’t be sure that our preferred font is always installed on users’ computer, we can use multiple fonts as the value of font-family for backup. This is known as font-stack.

Example: font family HTML

See the Pen font family HTML by Enjoy Tutorials (@enjoytutorials) on CodePen.

Example: font family sans serif

See the Pen font family sans serif by Enjoy Tutorials (@enjoytutorials) on CodePen.