The topic you requested is included in another documentation set. For convenience, it's displayed below. Choose Switch to see the topic in its original location.

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.


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




© 2014 Microsoft