microsoft.com Home   All Products  |   Support  |   Search  |   microsoft.com Home  
Microsoft

Microsoft Typography | Typography on the Web | Specifying fonts... | 5.2.2 'font-family' next


5.2.2 'font-family'

Value: [[<family-name> | <generic-family>],]* [<family-name> | <generic-family>]
Initial: UA specific.
The Internet Explorer 3.0 initial value is "Times New Roman", however this can be changed by the user under View..., Options..., General, Font Settings...
Applies to: all elements
Inherited: yes
Percentage values: N/A
Microsoft® Internet Explorer 3.0 support: partial.
Microsoft Internet Explorer 4.0 support: yes.
Navigator 4.0 support: yes.


The value is a prioritized list of font family names and/or generic family names. Unlike most other CSS1 properties, values are separated by a comma to indicate that they are alternatives: 

BODY { font-family: Verdana, Arial, sans-serif }

There are two types of list values:

<family-name>
The name of a font family of choice. In the last example, "gill" and "helvetica" are font families.

<generic-family>
In the example above, the last value is a generic family name. The following generic families are defined:

  • 'serif' (e.g. Times)
  • 'sans-serif' (e.g. Helvetica)
  • 'cursive' (e.g. Zapf-Chancery)
  • 'fantasy' (e.g. Western)
  • 'monospace' (e.g. Courier)

Style sheet designers are encouraged to offer a generic font family as a last alternative.

Font names containing whitespace should be quoted: 

BODY { font-family: "new century schoolbook", serif }
  
<BODY STYLE="font-family: 'My own font', fantasy">

If quoting is omitted, any whitespace characters before and after the font name are ignored and any sequence of whitespace characters inside the font name is converted to a single space.


Cross browser problems

Internet Explorer 4.0 and Navigator 4.0 seem to interpret font-family declarations in accordance with the CSS specification. Unfortunately, Internet Explorer 3.0 has various problems with font-family that often manifest themselves if the first choice font listed is not installed on the users computer.

Internet Explorer 3.0 also has problems interpreting style declarations that follow font-family declarations. For this reason it's best to place a font-family declaration at the end of a list of declarations for any selector.

The following table shows the fonts used by different browsers when the encounter font-family specified in a Web page. In these examples 'Bobsans' is a font not present on the users system.


CSS style declaration
{ font-family: ... 		Font used to render text by... Note
IE3 IE4 NSCP4
Verdana, Arial Verdana Verdana Verdana
Bobsans, Verdana, Arial default Verdana Verdana 1
'Bobsans, Verdana, Arial' Verdana Verdana default 2
'Trebuchet MS', Verdana, Arial Verdana Trebuchet MS Trebuchet MS 3
'Trebuchet MS', Verdana default Trebuchet MS Trebuchet MS 4
'X', 'bob sans', 'Trebuchet MS', X Trebuchet MS Trebuchet MS Trebuchet MS 5

Table 1. Fonts used when 'font-family' is specified in a STYLE block, linked style sheet or inline style declaration.


Note 1 Internet Explorer 3.0 will render text in the user's default font if the first font listed is not installed.

Note 2 Although enclosing the list of fonts in single quotes produces the desired effect in Internet Explorer 3.0, doing so contravenes the CSS spec and will not work with Netscape Navigator 4.0. Netscape 4.0 will render text in the users default font.

Note 3. In addition Internet Explorer 3.0 ignores the first font listed if it is enclosed in single quotes. Here the second font listed is used.

Note 4. However, if this font is also the last font listed the users default will be used by Internet Explorer 3.0.

Note 5. A non-existent font name (here we've used 'X' as a font name) is enclosed in single quotes and listed as the first choice font. A non-existent font name is also listed as the last font choice (with or without quotes). This results in Internet Explorer 3.0, as well as the other browsers, interpreting the declaration properly.

Advice

  • For correct rendering across all three browsers include a fictitious font name enclosed in single quotes as your first font choice and a fictitious font name as your last choice. 
    font-family: 'X', 'Bob sans', 'Trebuchet MS', X;
  • Place the font-family declaration at the end of the list of declarations for a selector. 
    P { font-size: 20px;
    color: red;
    font-family: 'X', Verdana, Arial, X; }
  • Alternately use browser detection to link to different style sheets depending on the browser used.



Dark blue text is taken from Cascading Style Sheets, level 1. W3C Recommendation 17 December 1996 - http://www.w3.org/pub/WWW/TR/REC-CSS1

this text [ext link] signifies an external link, please read our disclaimer.

this page was last updated 5 December 1997
© 1997 Microsoft Corporation. All rights reserved. Terms of use.
comments to the MST group: how to contact us

 

Microsoft Typography | Typography on the Web | Specifying fonts... | 5.2.2 'font-family' next