First thing's first: How do you tell the Web browser which font to display? You just type the name of the font after font-family, right?
Unfortunately, it's a little more complicated than that. Fonts are not always called the same thing across platforms. For example, Courier on a Mac is often called Courier New on a Windows machine. And whereas one machine might have an Italic variant of a font, another might call it Oblique. The more you look, the more inconsistencies you'll find.
On top of that, our name for a font isn't necessarily the same as the computer's name for the font, and you have to make sure you're using the computer's name. For example, Brush Script is actually Brush Script MT.
How do you find out what the computer's name for the font is? It depends on the platform:
- Windows users: Use the font name exactly as it appears in the font menu of an application, such as Microsoft Word.
- Mac users: Don't trust what applications tell you. Instead, open up the Fonts folder, which can be found in your System folder. Spell the font name in your stylesheets code the same way its file name is spelled.
font-family
font-family is the CSS property used to call a font by name. The basic syntax looks like this:
H2 { font-family: helvetica, impact, sans-serif }
Here's how a Web browser interprets this stylesheet rule: Look at the first font name on the list (helvetica). If a font with that name is installed on this computer, use it. If not, move on to the second font named. If impact also isn't installed, then move on to the third font specified. A value of sans-serif is a last-resort that tells the browser to use whatever its default sans-serif font is (probably Arial).
Here's how your browser would interpret the above code:
CSS font control is peachy.
If your browser doesn't support this CSS property, click here to see what it looks like.
You can put as many font names in your list as you want. This feature can be helpful if you're not exactly sure how a font is spelled on a different platform: Go ahead and list both spellings.
Note that browsers seem to prefer all-lowercase spellings for font names, although sometimes they will recognize capitalized names. As long as you test everything thoroughly, you should be fine (that seems to be the CSS mantra).
It's a good idea to always use a generic font name as the last on your list. Your options:
- serif (probably Times)
- sans-serif (probably Arial or Helvetica)
- cursive (probably Comic Sans)
- fantasy (probably Ransom)
- monospace (probably Courier)
(Note: Netscape Communicator doesn't support cursive or fantasy.)
More font name tips:
- If a font name consists of more than one word, such as Gill Sans, put quotes around the font name in your CSS code:
BODY { font-family: "gill sans", "new baskerville", serif }
- For inline styles, use single quotes:
<P STYLE="font-family: 'gill sans', 'new baskerville', serif">Text goes here.</P>
- If you're grouping declarations and font-family is among them, make it the last one, like so:
H2 { color: red; margin: 10px; font-family: times, serif }
Sometimes Internet Explorer 3 will ignore an entire CSS rule if font-family isn't the last property listed. It's strange but true.
There you have it. With the font-family property, you can start calling fonts by name and with more flexibility than by using the <FONT FACE> tag.
Next up are more ways to size text than you could possibly imagine.
next page»
