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?

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.

go to top

 


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.

 

This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow
Donate