CSS font-family Property

The font-family property specifies the font to use for text.

The value can be any number of font names.

All but the first font are fallback fonts.

A fallback will be used if the first font is not supported.

Example

#

Text using the Gill Sans font.

Text using the Gill Sans font.

<p style="font-family: 'Gill Sans', 'Gill Sans MT',
                        Calibri, 'Trebuchet MS', sans-serif">
  Text using the Gill Sans font.
</p>

Using font-family

The font-family property accepts one or more font names.

All but the first font are fallback fonts.

Two font-family naming conventions are supported:

  • family-name - for example, "Courier", "Arial", "Times", and more.
  • generic-family - for example, "serif", "sans-serif", "monospace", and more.

Some commonly used font-families.

Font families
Arial, Arial, Helvetica, sans-serif
Courier New, Courier New, monospace
Georgia, serif
Lucida Console, Monaco, monospace
Lucida Sans Unicode, Lucida Grande, sans-serif
Palatino Linotype, Book Antiqua, Palatino, serif
Tahoma, Geneva, sans-serif
Times New Roman, Times New Roman, Times, serif
Trebuchet MS, Trebuchet MS, sans-serif
Verdana, Verdana, Geneva, sans-serif
Tip: Fonts can also be loaded with the @font-face rule.

Syntax

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

Values

#

Property Values Description
font-family family-name
generic-family
List of font-family names
initial Sets the value to its default value.
inherit Inherits the value from its parent element.

Browser support

This table shows when font-family support started for each browser.

Chrome
1.0 Dec 2008
Firefox
1.0 Nov 2004
IE/Edge
4.0 Sep 1997
Opera
3.5 Nov 1998
Safari
1.0 Jun 2003

You may also like

Guides