CSS Attributes Index   Font Attributes

---

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

CSS	{ font-family: [ [ family-name | generic-family ] , ] * [ family-name | generic-family ] }
Script	object.style.fontFamily = sFamily ]

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

The property is read/write with the default value set by the browser; the cascading stylesheet ( CSS ) attribute is inherited.

The value is a prioritized list of font family names and/or 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 be quoted with single or double quotation marks; generic font family names are values and, accordingly, no quotes should be used.

Because authors don't know which fonts users have installed, authors should provide a list of alternatives with a generic font family at the end of the list. This list can include embedded fonts. See fontFace property for more information on embedding fonts.

The generic-name fantasy possible value renders in the default font.

The following example demonstrates the effects of applying different typefaces for the font-family attribute. This demo requires Microsoft^® Internet Explorer^® 4 or later.

 Show me 

The following examples demonstrate use of inline event handlers to dynamically change an element’s font-family characteristics. Both methods yield the same effect.

The sample below defines font-family style attributes in an embedded stylesheet, and invokes calls to the stylesheet in response to mouse events.

<style>
   .serif { font-family: serif }
   .comic { font-family: comic sans ms }
   .arial { font-family: arial }
</style>
...
<p onmouseover="this.className='serif'"
   onclick="this.className='comic'"
   ondblclick="this.className='arial'"
   onmouseout="this.className=''>
   ...
</p>

 Show me 

The sample below uses inline event handlers to dynamically change an object’s fontFamily style property in response to mouse events.

<p onmousedown="this.style.fontFamily='serif'"
   onmouseup="this.style.fontFamily=''">
   ...
</p>

 Show me 

font, @font-face Rule, font-size, font-style, font-variant, font-weight