Identifying Installed Fonts - DHTML Lab | 6 | WebReference

Identifying Installed Fonts - DHTML Lab | 6


Identifying Installed Fonts
function overhead and IE statements


The first statements are our usual browser identification variables:

IE4 = document.all;
NS4 = document.layers;
ver4 = (IE4 || NS4);
if(!ver4) return false;

If a non-DHTML browser is being used, we cannot use our layer-based workaround, so the function returns false.

Next, we identify the platform being used, and assign the isMac and isWin variables:

isMac = (navigator.appVersion.indexOf("Mac") != -1);
isWin = (navigator.appVersion.indexOf("Win") != -1);

We know that Navigator for Windows has a problem with some dingbat fonts. We create an array for storing the names of these fonts. If you know of other fonts that NSWin does not support, you can add them to the array:

arNotNavWin = ["Webdings","Marlett"];

Now, we determine if the user is using Navigator for Windows. If they are, we cycle through the arNotNavWin array, comapring its elements to the first argument, fname, the font being checked. If the font is found in the array, we know that it will not be displayed properly by the browser, even if it is installed, so we return false.

if(NS4 && isWin) {
   for(i=0;i<arNotNavWin.length;i++) {
      if (fname == arNotNavWin[i]) return false;

If we get this far in the function, we are using a compatible browser and testing for a font which can be displayed.

We create a variable, teststr, to store the string we will use to test. All spaces are included as non-break-spaces (&nbsp;) since we do not want the text to wrap. You can use any text you like by changing it here.

teststr = "font&nbsp;existence&nbsp;test"

We are now ready to start our test.

The IE Statements

Since we might do more than one font check, any elements we create to this end should be recycled as much as possible. Therefore, our first task is to determine if the elements exist. Since we will be calling our elements, fntLyr0 and fntLyr1, and they will be created together, we check for the existence of the first one, fntLyr0. If it doesn't exist (!window.fntLyr0) we execute the statements that create the two elements:

if(!window.fntLyr0) {
   lyrstr0 = "<SPAN ID=fntLyr0 STYLE='position:absolute;visibility:hidden;width:30;font:12pt Courier'>"+ teststr +"</SPAN>";
   lyrstr1 = "<SPAN ID=fntLyr1 STYLE='position:absolute;visibility:hidden;width:30;font-size:12pt'>"+ teststr +"</SPAN>";
   if (loaded) {
   else {

We create two HTML strings that define the two elements. (They could just as easily be one long string for both elements. We have kept them separate for the sake of clarity. You can combine them to save statements.) We create absolutely positioned SPAN elements. The first one, fntLyr0, has the font family defined (Courier). The second does not. We will do this dynamically later.

Next, we check the second function argument, loaded. If the function is being called after the page has loaded, you will have given this argument a value of true or 1. In this case, the insertAdjacentHTML() method is used to insert the element HTML into the page. If the page is still loading, the document.write() method is used.

IE5 Note:
Internet Explorer 5 can execute insertAdjacentHTML() even during page load. For that matter, the elements could have been created in a more elegant method by using the DOM. We have chosen a lowest-common-denominator method for both IE4 and IE5. IE5-specific code would only make the function longer.

We have now created the two elements and come out of the if() statement. If this is not the first time the function has been called then the if() statement has been ignored and only the following statements are executed: = fname +",Courier";
width0 = (isMac) ? fntLyr0.offsetWidth : fntLyr0.scrollWidth;
width1 = (isMac) ? fntLyr1.offsetWidth : fntLyr1.scrollWidth;

The second element, fntLyr1, is assigned a font list, including our font-to-be-checked, fname, and Courier.

Now, we need the widths of the two elements or rather, the width of the element's contents, stored in an element's scrollWidth property. Unfortunately, IE for Macintosh returns this value in the offsetWidth property. (?!?!)

The width values for fntLyr0 and fntLyr1 are stored in the width0 and width1 variables, respectively. They will be used when we come out of the browser-specific part of the function. For now, let's get to this point in Navigator.

Produced by Peter Belesis and

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