font-family

Browser Internet Explorer Netscape Opera Safari Firefox
Version 5.5 6.0 7.0 8.0 8.0 9.0 7.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0
Supported Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes

Short information
CSS CSS1
Default value Font set in browser on default. Usually it is Times New Roman.
Inherited Yes
Applied To all elements
HTML analog <font face="...">
Reference to specification http://www.w3.org/TR/CSS21/fonts.html#propdef-font-family

Description
It determines font properties which will be used for content text appearance. A list of fonts may include one or more names divided by a coma. If the font name has spaces, it is necessary to quote it. For example: Trebuchet MS.
When a browser meets the first font at the list, it checks font availability on the user computer. If the font is absent you should take the next name from the list and analyse its presence. Therefore few fonts increase a possibility that at least one of them will be displayed at client computer. A key word describing a font type ends a list usually (serif, sans-serif, cursive, fantasy or monospace). Thus you should begin from exotic font types and finish by general name specifying protraction mode.

Syntax

font-family: font name [, font name[, ...]]

Arguments
Any amount of the fonts divided by comas. Universal font features.
• serif — fonts with serifs (antiqued), for example Times type;
• sans-serif — sanserifs (fonts without serifs or grotesques), such as Arial;
• cursive — cursive fonts;
• fantasy — decorative fonts;
• monospace — monospace fonts, width of every symbol in that family is identical.

Example
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>font-family</title>
  <style type="text/css">
   H1 {
    font-family: Geneva, Arial, Helvetica, sans-serif;
   } 
   P {
    font-family: Georgia, 'Times New Roman', Times, serif;
   }
  </style>
 </head> 
 <body> 
 
  <h1>Duis te feugifacilisi</h1>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem 
  nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. 
  Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit 
  lobortis nisl ut aliquip ex ea commodo consequat.</p>
 
 </body>
</html>

The result of this example is shown on the figure 1


Object model

[window.]document.getElementById("elementID").style.fontFamily