How to Specify Text Fonts
Wouldn't it be great if you could use any font in the world for your Web page? Guess what...you can. Sort of. This task shows you how to specify any font you want on your Web page. But you can't prevent the reader from overriding these wonderful font settings with a simple click or two in a browser dialog box. By now, you get the picture: You can work hard to make your Web pages look "just so." But you can never guarantee how they will ultimately appear to the viewer. Browser differences—and browser options—see to that!
When All's Said and Done
Most browsers can be set to ignore the <font> tag and use a default font. Another consideration is font availability. Remember that HTML merely tells the browser which font to use. You're not including the actual font with the document. What does that mean? Well, a font might look great when you view it on your machine. But what happens when I surf to your page? My browser comes across the face attribute, which tells it, "Use this fancy font." My browser goes in search of the font. But if I don't have that font on my system, my browser can't find it, and it falls back to use the default font on my machine. The point? Unless you can be sure that your audience has the font you choose, stick to basic fonts. Standard Windows machines come with Times New Roman and Arial; Macintosh machines come with Times and Helvetica (which is essentially the same as Arial). You should stick with these fonts.
Add the face Attribute
Specify a Font
Specify Font Alternatives
Test Your Page
Another important attribute of the <font> tag is the face attribute. Add it just as you add any other attribute. Type <font face="value"> where value is the desired typeface.
<html> <head> <title>Working with the Font Tag</title> </head> <body> <font size="4" face="value"> Here I have left the size attribute in and added the face attribute to the font tag.</font> </body> </html>
You can specify any font you desire in the face attribute. For instance, to specify the typeface Comic Sans MS, type <font face="comic sans ms">...</font>.
<html> <head> <title>Working with the Font Tag</title></head> <body> <font size="4" face="comic sans ms"> Here I have chosen Comic Sans MS for the value in the face attribute.</font> </body> </html>
If you specify a different font, you should also specify alternatives for people who don't have that font on their computers. To do so, separate the alternatives by a comma. Type <font face="comic sans ms, arial, helvetica">. The browser first looks for Comic Sans MS; if it can't find that font, it looks for Arial, and so on. If it can't find any of the fonts in the list, it uses the system default.
<html> <head> <title>Working with the Font Tag</title></head> <body> <font size="4" face="comic sans ms, arial, helvetica"> Here I have chosen Comic Sans MS for the value in the face attribute. I also list two alternatives: Arial and Helvetica. Because Comic Sans MS is loaded on my system, the alternative fonts are not called on by the browser.</font> </body> </html>
Save your page and test it once again in a browser. Explore your browser's options. Set the browser to ignore the page's <font> tag settings so that you can see how your page looks to any viewer who makes this adjustment to his own browser. (see figure 2.3)
){kind=link}