Dofactory.com
Dofactory.com
Earn income with your CSS skills
Sign up and we'll send you the best freelance opportunities straight to your inbox.
We're building the largest freelancing marketplace for people like you.
By adding your name & email you agree to our terms, privacy and cookie policies.

CSS font-family

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


Last updated on Sep 30, 2023

Earn income with your CSS skills
Sign up and we'll send you the best freelance opportunities straight to your inbox.
We're building the largest freelancing marketplace for people like you.
By adding your name & email you agree to our terms, privacy and cookie policies.

Guides