Specifying fonts is one of the many ways to make your webpage customized to your tastes or project specifications. When setting fonts, keep in mind the possibility of the web user’s computer not having the fonts you specify. If this is the case, the computer may use fonts that may be unacceptable to you. If, for example, you specify to use font type Technic, it is possible the web user’s computer does not have that font available and the computer would use a substitute. As a result, your page may not look the same if the substituted font is drastically different form the original font type you specified.
To avoid this situation, choose fonts that are more widely available or supported with substitutes. If you are absolutely sure you want to use only one particular font and that font is not widely available on your user’s machines, you may consider making text as graphic. This will ensure your pages appear universally similar. However, this approach introduces new problems of its own. First of all, from a web usability perspective, a screen reader cannot read the text embedded in graphics. Secondly, text size cannot be increased if the text is embedded in graphics, like ordinary text on a webpage. Finally, depending on the how the graphic is constructed, it may take longer to download because generally speaking text is downloaded faster than graphics.
As another alternative, to partially overcome the problem of user not having a particular font is to specify more than one font. With this approach, you want to make sure your choices of fonts yield similar output on the browser. Otherwise, your font choices may yield drastically different outputs because of the font choices you specified. As an example, Arial, Helvetica, sans-serif, would be the ideal choice for specifying more than one font types. While on Windows Operating System, Arial type is available, Helvetica is available on both Macintosh and UNIX.
One you specify more than one choice of fonts, the computer uses the first one that is available from the lists while searching from left to right. If none of the font choices are available from your list, then, the computer uses the default font — again that choice may be unacceptable to you.
For your convenience, Table 1 lists commonly available fonts on Windows, Macintosh, and UNIX.
Table 1 equivalent fonts on three main Operating Systems | ||
---|---|---|
Windows | Macintosh | UNIX |
Arial | Helvetica | Helvetica |
Courier New | Courier | Courier |
Times New Roman | Times | Times |
Fonts traditionally were specified (you can still find pages) with the font tag and face attribute. For example,
<font face="Arial">
instructs the browser to render the text using the Arial font because that is the value specified with the attribute face. To specify more than one font (but normally upto three), simply separate each font choice with a comma. Your comma-separated list of fonts may read something like:
<font face="Arial, Helvetica, sans-serif">
This piece of markup instructs the browser to use the first font that is available, starting from left to right. If none of the fonts are available from your list, the computer will use the default font.
In favor of use of style sheets, the font tag has been deprecated. What that means is that the font tag use should be avoided and style sheets should be used instead to set up fonts for webpages. The following gives an example of how to set the same fonts choices using a style sheet specification:
<style>
p {font-family:Arial, Helvetica, sans-serif;}
</style>
With this specification, we are defining three font choices for a paragraph tag (p). The style tag contains our style specification. The style tag is placed inside the header tag. You only need one style tag to contain all of your styling information. In the following example, we are specifying number of font choices for some of the common tags used in XHTML:
<style>
strong {font-family:"Times New Roman", Times, serif;}
em {font-family:Georgia, "Times New Roman", Times, serif;}
cite {font-family:Arial, Helvetica, sans-serif;}
</style>
Notice in this example, we have surrounded the Times New Roman font choice with double quotation marks. This is necessary whenever the font choice name contains one or more space characters.