font-family

Article
10/10/2017

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

Syntax

{ font-family: sFamily }

Possible values

sFamily

String that specifies one of the following values:

family-name	Any of the available font families supported by the browser (for example, Times, Helvetica, Zapf-Chancery, Western, or Courier).
generic-name	Any of the following font families: serif, sans-serif, cursive, fantasy, or monospace.

This property has no default value. It is inherited.

Remarks

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, the name 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.

Examples

The following example shows how to use a call to an embedded style sheet to set the font-family property:

<html>
<head>
<style>
  p {font-family:"arial"}
  .other {font-family:"courier"}
</style>
</head>
<body>
  <p tabindex="1"
     onkeydown="this.className='other'"
onmousedown="this.className='other'"
onmouseup="this.className=''"
onkeyup="this.className=''">Tab to select this paragraph and press any key, or just click it, to change the font-family style property to COURIER.</p>
</body>
</html>

The following example shows how to define a hierarchy of fonts (in this case, an embedded font and a system font). The browser goes through the list until it finds a font it can apply. This is useful for pages with fonts that may not be accessible or loaded on a user's computer:

<style type="text/css">
   @font-face {
      font-family: "My_font";
      src: url(http://www.adatum.com/some_font_file.eot);
   }
   body {font-family: "My_font", Arial}
</style>

Standards information

This property is defined in Cascading Style Sheets (CSS), Level 1 (CSS1) Ee371191.xtlink_newWindow(en-us,Expression.40).png .

Applies to

A, ADDRESS, B, BASEFONT, BIG, BLOCKQUOTE, BODY, BUTTON, CAPTION, CENTER, CITE, CODE, COL, COLGROUP, CUSTOM, DD, DEFAULTS, DFN, DIV, DL, DT, EM, FIELDSET, FORM, HN, HTML, I, IMG, INPUT TYPE=BUTTON, INPUT TYPE=CHECKBOX, INPUT TYPE=FILE, INPUT TYPE=IMAGE, INPUT TYPE=PASSWORD, INPUT TYPE=RADIO, INPUT TYPE=RESET, INPUT TYPE=SUBMIT, INPUT TYPE=TEXT, LI, OL, P, S, SELECT, SPAN, SUB, TABLE, TBODY, TD, TFOOT, TH, THEAD, TR, TT, U, UL, VAR, XMP