If you want to specify the typeface or font family on your Web documents you should use the font-family style property.
The simplest font-family style uses just one font family:
font-family: Arial;
But this doesn't the the user agents what to do if they don't have that font. This can result in some very funny looking pages. I once went to a page where my computer displayed it completely in "Wingdings" (an icon-set) because my computer didn't have the font, and my browser guessed very badly. The page was completely unreadable.
Separate Multiple Font Families with a Comma
Put your font choices in order of your preference. In other words, if the browser doesn't have the first family on the list, it will try the second and then the third and so on until it finds one it has on the system.
font-family: Pussycat, Algerian, Broadway;
In the above example, the browser will first look for the "Pussycat" font, then "Algerian" and finally if neither of those were found, "Broadway".
Two Font Sets in the Same Document
Sometimes you might want to use one font set for the majority of your pages, but characters (glyphs) from another font set as well. Such as if you need to display mathematical symbols or Japansese characters in an English (Latin-1) document. Put your primary font first - this is the family that the majority of the page is written in. Followed by the next most common and the next and so on. Then, when the browser comes upon a glyph that doesn't exist in the first character set it will try the second and then the third. For example, to get Japanese and mathematical symbols into an English page you might write the style:
font-family: Baskerville, "Heisi Mincho W3", Symbol;(Example adapted from W3C Fonts page.)
Use Generic Fonts Last
But you can still end up with a list of fonts, none of which the browser can find. And you still don't want your page to show up unreadable. Luckily CSS has a solution for this too: generic fonts.
Always end your font list (even if it's a list of one family) with a generic font. There are five:
- cursive
- fantasy
- monospace
- sans-serif
- serif
The two above examples might be changed to:
font-family: Arial sans-serif;
font-family: Pussycat, Algerian, Broadway, fantasy;
Some Font Family Names are Two or More Words
If the font family you want to use is more than one word, then you should surround it with double-quote marks. While some browsers can read font families without the quotation marks, there may be problems if the whitespace is condensed or ignored.
font-family: "Times New Roman", serif;
