Identifying Installed Fonts - DHTML Lab | 4 | WebReference

Identifying Installed Fonts - DHTML Lab | 4


Identifying Installed Fonts
dingbat font browser support

In order to display a dingbat font, there are two prerequisites:

  1. The font must be installed on the user's system.

  2. The user's browser must be capable of displaying it.

Internet Explorer can display all dingbat fonts on all platforms.

Netscape Navigator can display all dingbat fonts only on the Macintosh. On Windows, it displays only the default Windows dingbat font, Wingdings.

Given the current browser preference, it is safe to say that MOST of your users will be able to display a dingbat font if it exists. So our technique will probably be worth using.

What technique, you say? Well, we're getting to that.

Font Metrics

Here we have two positioned, and updatable, elements. The first one has text rendered in 12 point Courier. The second will display the text in any font you specify in the form element below.

font existence test font existence test

Enter name of font:

     green width:   blue width:   font exists:

Enter a non-existent font name, or nonsense text. The second element will render in Courier. It will be the same width as the first. You should now have figured out how our workaround technique works!

Every font has specific widths defined for each character. These widths are the font metrics.

We cannot check for the existence of a font by any built-in method. So we create two positioned elements. In the first, we place a predefined text to be displayed with a predefined font. Courier, or any monospaced font is best, since you will probably not test for the existence of a monospaced font.

In the second positioned element, we place the same text, but the font family specification is a list. The first list value is the font we are checking. The second is the font used in the first element, eg. Courier.

In a hard-coded version, our HTML would look like this:

<SPAN STYLE="position:absolute;width:30;font-size:12pt;
<SPAN STYLE="position:absolute;width:30;font-size:12pt;

The width value is a small dummy value, required by IE4. The element width will expand to fit the text.

We know that a browser will substitute the second font, if the first font in a list is not found. So if, in the above example, Webdings does not exist, Courier will be substituted. The width of the second element will then be equal to the width of the first. If Webdings exists, the width of the second element will be different from the width of the first, since Webdings has different font metrics from Courier.

There is a chance that the text we used above might end up having the same width in a non-monospaced font as it does in Courier. Then our reasoning would not work. Remember this is just a workaround. It is specifically meant to be used to determine the existence of useful dingbat fonts, although any font can be checked. The known dingbat fonts will always be identified with our method.

Now we know the logic of the technique. Let's create a script to do this for us in the background.

Produced by Peter Belesis and

All Rights Reserved. Legal Notices.
Created: Feb 08, 2000
Revised: Feb 08, 2000