Skip to main content
font-family property

Specifies the name of the font used for text in the object.

CSS 2.1, Section 5.2.2



font-family: [ [ <family-name> | <generic-family> ] [ , | <family-name> | <generic-family> ]* ]

Property values


Any of the available font families supported by the browser. For example, Times, Helvetica, Zapf-Chancery, Western, or Courier.


Any of the following font families: serif, sans-serif, cursive, fantasy, or monospace.

CSS information

Applies ToAll elements
Initial ValueDepends on user agent

Standards information


The value is a prioritized list of font family names and generic family names. List items are separated by commas to minimize confusion between multiple-word font family names. If the font family name contains white space, it should appear in single or double quotation marks; generic font family names are values and cannot appear in quotation marks.

Because you do not know which fonts users have installed, you should provide a list of alternatives with a generic font family at the end of the list. This list can include embedded fonts. For more information about embedding fonts, see the @font-face rule.

The default for this property can be set for Windows Internet Explorer on the General tab of the Internet Options menu by clicking the Fonts button.


This example displays text using fonts from different font families. Each line of text uses font-family to display text in a font from a different font family.

body {
  font-family: Garamond, 'Times New Roman', Georgia, serif;
.sans-serif {
  font-family: 'Trebuchet MS', Arial, Helvetica, sans-serif;
.monospace {
  font-family: Courier, Monaco, monospace;
.cursive {
  font-family: 'Comic Sans MS', cursive;
.fantasy {
  font-family: 'Copperplate Gothic', Impact, fantasy;

  <p>Lorem ipsum dolor sit amet... (<em>font-family: Garamond, 'Times New Roman', Georgia, serif</em>)</p>
  <p class="sans-serif">Lorem ipsum dolor sit amet... (<em>font-family: 'Trebuchet MS', Arial, Helvetica, sans-serif</em>)</p>
  <p class="monospace">Lorem ipsum dolor sit amet... (<em>font-family: Courier, Monaco, monospace</em>)</p>
  <p class="cursive">Lorem ipsum dolor sit amet... (<em>font-family: 'Comic Sans MS', cursive</em>)</p>
  <p class="fantasy">Lorem ipsum dolor sit amet... (<em>font-family: 'Copperplate Gothic', Impact, fantasy</em>)</p>

The following image shows the result. The first line of text shows the default body element font family, which uses a serif font. The second line of text shows sans serif font-family setting. The third line of text shows a monospace font-family setting. The fourth line of text shows a cursive font-family setting. The final line of text shows a fantasy font-family setting:

An image showing text with different font-family settings.

See also