font-family property
[This documentation is preliminary and is subject to change.]
Sets or retrieves the name of the font used for text in the object.
 |
Syntax
font-family: [ [
<family-name>
|
<generic-family>
] [ , |
<family-name>
|
<generic-family>
]* ]
Property values
- family-name
-
Any of the available font families supported by the browser. For example,
Times,Helvetica,Zapf-Chancery,Western, orCourier. - generic-family
-
Any of the following font families:
serif,sans-serif,cursive,fantasy, ormonospace.
CSS information
| Applies To | All elements |
|---|---|
| Media | visual |
| Inherited | 1 |
| Initial Value |
Standards information
- CSS 2.1, Section 5.2.2
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, 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.
Examples
The following example shows how to use a call to an embedded style sheet to set the font-family attribute .
Code example: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/refs/font-family.htm
<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 down a
key or just click it with the mouse to change the font-family style
attribute to COURIER.</P>
</BODY>
</HTML>
The following example shows how to use inline scripting to change the font-family property.
Code example: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/refs/fontFamily.htm
<HTML> <BODY> <DIV tabindex ="1" onkeydown="this.style.fontFamily='Courier'" onkeyup="this.style.fontFamily=''" onmousedown="this.style.fontFamily='Courier'" onmouseup="this.style.fontFamily=''">Tab to select this DIV element and press down a key or just click it with the mouse to change the fontFamily style property to COURIER. </DIV> </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 when the Web author wants to use fonts that might or might not be accessible or loaded onto a user's machine.
<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>
See also
Build date: 3/14/2012
Assuming the following:
<span id='test'>My Text</span>
Running this script:
document.getElementById('test').style.fontFamily="";
Will results in the following:
<span id='test' style="FONT-FAMILY: ">My Text</span>
This is apparent in the provided sample, http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/refs/fontFamily.htm -- you'll need to use the developer toolbar to see the blank font-family property.
The workaround (you're welcome!) is to use the "removeAttribute" method on the style object:
document.getElementById('test').style.removeAttribute("font-family");
- 4/15/2011
- tswaters
The family names listed correspond to the generic names in listing order; however, they are not provided by Microsoft. Internet Explorer uses the following substitutions for the generic fonts at my place: Times New Roman, Arial, Comic Sans MS, Blackadder ITC and Courier New. Times, Helvetica, and Courier are correctly substituted if declared; the other ones are not.
It should be noted that Comic Sans MS is a compatible replacement for Zapf-Chancery but Blackadder ITC is radically different from Western (both are decorative, but around different motives). A cursive font is better known as a script font; that does not necessarily mean a running script. Indeed, both Zapf-Chancery and Comic Sans MS have block glyphs. A fantasy font is a decorative font; nothing can be assumed about the shape and character of the glyphs except that they are decorative.
The CSS 2.1 specification orders that font families should be tried to find a missing glyph in order of declaration. Internet Explorer 7 ignores this rule: if it cannot find a glyph for the character in the first font family it is able to find, it ignores the remanining font families declared and uses Lucida Sans Unicode instead. This is unfortunate because the latter does not contain many important glyphs, e.g. for angle brackets ⟨ and ⟩. These glyphs are provided in the typefaces Symbol*, Cambria Math and Arial Unicode MS — the latest belongs to the Microsoft Office suite.
*The Symbol typeface renders as empty boxes in IE8 standards mode. There is a commercial replacement called Symbol Std from Monotype Imaging but it is not included in Microsoft Windows, and Segoe UI Symbol is included in Windows 7.
FONT-FAMILY: SYMBOL, "ARIAL UNICODE MS"
The rule works in IE8 but gives incorrect results when such text is pasted into Microsoft Word. Microsoft Word chooses to use Symbol font for such ranges, and the glyphs displayed are unrelated to the original characters.
