• Choose a category
• All
• Classic-Fiction

“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

This is a heading

This is ordinary text.

Figure 2-1: The headline is in the Comic Sans font (most of the time).

Applying the font-family style attribute

The secret to this page is the CSS font-family attribute. Like most CSS elements, this can be applied to any HTML tag on your page. In this particular case, I applied it to my level one heading.

h1 {

font-family: “Comic Sans MS”;

}

You can then attach any font name you wish, and the browser attempts to use that font to display the element.

Even though a font may work perfectly fine on your computer, it may not work if that font isn’t installed on the user’s machine.

If you run exactly the same page on a Linux machine, you might see the result shown in Figure 2-2.

The specific font Comic Sans MS is installed on Windows machines, but the MS stands for Microsoft. This font isn’t always installed on Linux or Mac. (Sometimes it’s there, and sometimes it isn’t.) You can’t count on users having any particular fonts installed.

The Comic Sans font is fine for an example, but it has been heavily over-used in Web development. Serious Web developers avoid using it in real applications because it tends to make your page look amateurish.

Figure 2-2: Under Linux, the heading might not be the same font!

Using generic fonts

It’s a little depressing. Even though it’s easy to use fonts, you can’t use them freely because you don’t know if the user has them. Fortunately, you can do a few things that at least increase the odds in your favor. The first trick is to use generic font names. These are virtual font names that every compliant browser agrees to support. Figure 2-3 shows a page with all the generic fonts.

Figure 2-3: Here are all the generic fonts.

I used browser controls to make the fonts larger than normal so you can see the details in this figure. Both the programmer and the user should be able to change the font size. Later, I describe how to change the font size through code.

The generic fonts really are families of fonts:

♦ Serif: These fonts have those little serifs (the tiny cross strokes that enhance readability). Print text (like the paragraph you’re reading now) tends to use serif fonts, and they’re the default font for most browsers. The most common serif typeface is Times New Roman or Times.

♦ Sans Serif: Sans serif fonts don’t have the little feet. Generally, they’re used for headlines or other emphasis. Sometimes, they’re seen as more modern and cleaner than serif fonts, so sometimes they’re used for body text. Arial is the most common sans serif font. In this book, the figure captions use a sans serif font.

♦ Cursive: These fonts look a little like handwriting. In Windows, the script font is usually Comic Sans MS. Script fonts are used when you want a less formal look. For Dummies books use script fonts all over the place for section and chapter headings.

♦ Fantasy: Fantasy fonts are decorative. Just about any theme you can think of is represented by a fantasy font, from Klingon to Tolkien. You can also find fonts that evoke a certain culture, making English text appear to be Persian or Chinese. Fantasy fonts are best used sparingly, for emphasis, as they often trade readability for visual appeal.

♦ Monospace: Monospace fonts produce a fixed-width font like typewritten text. Monospace fonts are frequently used to display code. Courier is a common monospace font. All code listings in this book use a monospaced font.

Because the generic fonts are available on all standards-compliant browsers, you’d think you could use them confidently. Well, you can be sure they’ll appear, but you still might be surprised at the result.