Specifying Fonts
Most pages that you see displayed on the internet use only one or two fonts. What's more, its always the same couple of fonts that people use.
The main reason for this is that internet pages are displayed using the fonts that the visitors to your site have available on their computer. The visitors to your site may be using any operating system and any browser that can be run on that operating system. There are only about half a dozen fonts that all of these combinations have in common, so if you want your page to always appear in the font that you selected then you don't have much choice of which fonts to use. See below for a list of the commonly available fonts.
To which font that the text on your page should display in we use style sheets. This enables us to have all text of a particular type across our entire site appear in the same font face, size, colour, etc and by changing one line of code, all occurrences can be updated at once.
As an example, I have placed the following entry in the master.css file which is the external style sheet file that I have attached to all of the pages on my site.
h6{font-family:verdana,arial,sans-serif;}
The effect of this statement is that all text contained within <h6> tags displays in Verdana font if it is available on the visitor's computer. If that font is not available and Arial font is then the text will display in Arial. If neither is available on the visitor's computer then the default sans-serif font as defined on that computer will be used.
If an appropriate tag is not available to define the groups of text that you want to appear in a given font then you can define the style sheet entry as follows.
.myfont{font-family:verdana,arial,sans-serif;}
You can then attach this font definition to the text you want it applied to by placing a <span class="myfont"> tag in front of the text and a </span> tag behind the text to which the font is to be applied. Don't forget to include the dot in front of whatever class name you selected when you define its attributes in the style sheet declaration.
The one disadvantage of using style sheets instead of font tags to define your fonts is that there are still a number of people out there who are using earlier versions of browsers which either don't support style sheets of don't support all of the declarations that you might place in your style sheets. These visitors will see your site using the default internet font defined on their computer.
So is there any way at all that we can ensure that the visitors to our site see our pages in the exact fonts that we want them to see it in?
- Well for short sections of text there is the old suggestion of creating a graphic that contains your text. This makes for a slower download than a pure text approach would have particularly if more than a really small section of text was to be done that way.
- Another option, if you own the full version of Adobe Acrobat, is to create your pages as pdf files and embed the desired fonts into them. Once your visitors have downloaded the free acrobat reader plugin, they can view your pages exactly as you intended for them to appear. The main disadvantage of this method is that you have to pay several hundred dollars to purchase a copy of the full version of Acrobat to be able to create your pages.
- Both Internet Explorer and Netscape have recently developed ways whereby a font that you upload to the internet in a special format can be automatically downloaded and used to display your page. The first of the disadvantages of this is that each has come up with a different method from the other and these methods are incompatible with one another. To create fonts for use with the latest Windows versions of Internet Explorer you need to download a program called WEFT to convert the font file to the necessary .EOT format. For Netscape you need to purchase software from Bitstream Inc. to convert your font to TrueDoc format. Other disadvantages include that these fonts don't work for other platforms or browsers (different operating systems use fonts in different formats even when they have the same name and appearance), you need to place special code in your style sheet to get the font to download and any subsequent listed fonts may be ignored by browsers that don't support the particular type of font being downloaded, and finally even if your download would have worked correctly the visitors to your site can in any case completely override any fonts that you specify for use on your site by defining their own style sheet that will be used instead of any that you supply.
To summarize, if you create your page using HTML then any font definitions that you specify are recommendations only. If the visitor to your page does not have the specified font on their computer, or is unable to handle any downloadable font that you have loaded, or has decided to specify their own style sheet, then the visitor will see your page using fonts different from the ones that you intended. While you have control of the content of your page, the final control of its layout lies with your visitors.
The following are the core fonts that you can expect to find on all computers running the specified operating system (or browser). As you can see, there is just about no overlap between fonts available on Windows and Macintosh platforms. You should specify corresponding fonts from each range in your style sheet definitions if you want visitors using all platforms to see the page having a similar appearance.
Windows
Arial; Copperplate Gothic Bold; Copperplate Gothic Light; Courier New; Symbol; Times New Roman; Wingdings.
Windows 98/2000 onwards - Abadi MT Condensed Light; Arial Black; Book Antiqua; Calisto MT; Century Gothic; Comic Sans MS; Lucid Console; Lucida Handwriting Italic; Lucida Sans Unicode; News Gothic MT; OCR A Extended; Tahoma; Verdana; Webdings.
Macintosh
Charcoal; Chicago; Courier; Geneva; Helvetica; Monaco; New York; Palatino; Symbol; Times.
System 8.5 onwards - Apple Chancery; Capitals; Gadget; Hoefler Text; Sand; Skia; Techno; Textile.
Fonts installed with Internet Explorer on Both Platforms
Andale Mono; Arial Black; Comic Sans MS; Impact; Verdana.
IE 5 onwards - Georgia; Minion Web; Trebuchet MS; Webdings.
