totn CSS

CSS: font-family property

This CSS tutorial explains how to use the CSS property called font-family with syntax and examples.

Description

The CSS font-family property defines a prioritized list of font family names to apply to an element.

Syntax

The syntax for the font-family CSS property is:

font-family: value;

Parameters or Arguments

value

A list of font family names. It can be one of the following:

Value Description
family-name Name of a font family.
If the font family name contains whitespace, the value must be enclosed in quotation marks.
Some of the family-name values are (there are many more):
  • "Times New Roman"
  • Times
  • Verdana
  • Geneva
  • Georgia
  • "Courier New"
  • Courier
  • "Comic Sans MS"
p { font-family: Georgia, "Times New Roman", Times; }
generic-family Generic font families are used as a fallback mechanism in case none of the other family-names listed are available. These values must NOT be enclosed in quotation marks.
Generic-family names can be one of the following:
  • san-serif
  • serif
  • cursive
  • monospace
  • fantasy
p { font-family: serif; }
inherit Element will inherit the font-family from its parent element
p { font-family: inherit; }

Note

  • The values listed in the font-family property are comma separated.
  • The values listed in the font-family property are listed in priority. So the browser will try each of the font families in the order listed, until it finds one that is available.
  • Not all fonts are supported in all browsers, so you must be sure to list enough font-families so that the browser can find one available.
  • If the font-family name contains whitespace, you must enclose the name in quotation marks. ie: "Trebuchet MS".
  • When creating your font-family list, start with specific family-names first and end with one generic-family at the end of the list.

Suggested font-family Lists

To help give you an idea of how to create our own font-family list, here are some of our suggestions:

  • Verdana, Geneva, sans-serif
  • Georgia, "Times New Roman", Times, serif
  • "Courier New", Courier, monospace
  • Arial, Helvetica, sans-serif
  • Tahoma, Geneva, sans-serif
  • "Trebuchet MS", Arial, Helvetica, sans-serif
  • "Arial Black", Gadget, sans-serif
  • "Times New Roman", Times, serif
  • "Palatino Linotype", "Book Antiqua", Palatino, serif
  • "Lucida Sans Unicode", "Lucida Grande", sans-serif
  • "MS Serif", "New York", serif
  • "Comic Sans MS", cursive

Browser Compatibility

The CSS font-family property has basic support with the following browsers:

  • Chrome
  • Android
  • Firefox (Gecko)
  • Firefox Mobile (Gecko)
  • Internet Explorer (IE)
  • IE Phone
  • Opera
  • Opera Mobile
  • Safari (WebKit)
  • Safari Mobile

Example

We will discuss the font-family property below, exploring examples of how to use this property in CSS.

p { font-family: Arial, Helvetica, sans-serif; }

In this CSS font-family example, we have set the font-family in the <p> tag to first Arial. If Arial is not available, the browser will try Helvetica. If Helvetica is not available, the browser will try the generic font family called sans-serif.

Next, let's look at a CSS font-family example where we have whitespace.

span { font-family: "Comic Sans MS", cursive; }

In this CSS font-family example, we have whitespace in the name Comic Sans MS. In this case, the family-name must be enclosed in quotation marks as follows: "Comic Sans MS". If "Comic Sans MS" is not available, the browser will try the generic font family called cursive.

Share on: