1 out of 1 rated this helpful - Rate this topic

font-family Attribute | fontFamily Property

Gets or sets the name of the font used for text in the object.

Syntax

CSS { font-family : sFamily }

Scripting [ sFamily = ] object.style.fontFamily

CSS	{ font-family : sFamily }
Scripting	[ sFamily = ] object.style.fontFamily

Possible Values

sFamily String that specifies or receives 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.

The property is read/write for all objects except the following, for which it is read-only: currentStyle. The property has no default value. The Cascading Style Sheets (CSS) attribute is inherited.

DHTML expressions can be used in place of the preceding value(s). As of Internet Explorer 8, expressions are supported in IE7 Standards mode and IE5 (Quirks) mode only. For more information, see About Dynamic Properties and Defining Document Compatibility.

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.

The default for this property can be set for Windows Internet Explorer on the General tab of the Internet Options menu by clicking the Fonts button.

Examples

The following example shows how to use a call to an embedded style sheet to set the font-family attribute .
Copy
<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>  
Code example: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/refs/font-family.htm
The following example shows how to use inline scripting to change the fontFamily property.
Copy
<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>   
Code example: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/refs/fontFamily.htm
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.
Copy
<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).

Applies To

A, ADDRESS, B, BASEFONT, BIG, BLOCKQUOTE, BODY, BUTTON, CAPTION, CENTER, CITE, CODE, COL, COLGROUP, CSSStyleDeclaration, currentStyle, CUSTOM, DD, defaults, DFN, DIR, 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, ISINDEX, KBD, LABEL, LEGEND, LI, LISTING, MARQUEE, MENU, OL, P, PLAINTEXT, PRE, runtimeStyle, S, SAMP, SELECT, SMALL, SPAN, STRIKE, STRONG, style, SUB, SUP, TABLE, TBODY, TD, TEXTAREA, TFOOT, TH, THEAD, TR, TT, U, UL, VAR, XMP, CSSCurrentStyleDeclaration Constructor, CSSRuleStyleDeclaration Constructor, CSSStyleDeclaration Constructor

See Also

font

Did you find this helpful? Yes No

Not accurate

Not enough depth

Need more code examples

(1500 characters remaining)

Community Content Add

FAQ