Identifying Installed Fonts - DHTML Lab | 5 | WebReference

Identifying Installed Fonts - DHTML Lab | 5


Identifying Installed Fonts

Our One and Only Function

To help you use our technique in your pages and applications, we have included all the code necessary in a single function, checkIfInstalled(), which looks like this:

function checkIfInstalled(fname,loaded){
   IE4 = document.all;
   NS4 = document.layers;
   ver4 = (IE4 || NS4);
   if(!ver4) return false;
   isMac = (navigator.appVersion.indexOf("Mac") != -1);
   isWin = (navigator.appVersion.indexOf("Win") != -1);
   arNotNavWin = ["Webdings","Marlett"];
   if(NS4 && isWin) {
      for(i=0;i<arNotNavWin.length;i++) {
         if (fname == arNotNavWin[i]) return false;
   teststr = "font&nbsp;existence&nbsp;test"
   if(IE4) {
      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 {
      } = fname +",Courier";
      width0 = (isMac) ? fntLyr0.offsetWidth : fntLyr0.scrollWidth;
      width1 = (isMac) ? fntLyr1.offsetWidth : fntLyr1.scrollWidth;
      lyrstr1 = "<FONT FACE='"+ fname +",Courier' POINT-SIZE=12>"+ teststr +"</FONT>";
      if(!window.fntLyr0) {
         lyrstr0 = "<FONT FACE='Courier' POINT-SIZE=12>"+ teststr +"</FONT>";
         if (loaded) {
            fntLyr0 = new Layer(400);
            fntLyr1 = new Layer(400);
         else {
            document.write("<LAYER VISIBILITY=HIDE>"+ lyrstr0 +"</LAYER>");
            fntLyr0 = document.layers[document.layers.length-1];
            document.write("<LAYER VISIBILITY=HIDE>"+ lyrstr1 +"</LAYER>");
            fntLyr1 = document.layers[document.layers.length-1];
      else {
         if (loaded) {
         else {
            document.write("<LAYER VISIBILITY=HIDE>"+ lyrstr1 +"</LAYER>");
            fntLyr1 = document.layers[document.layers.length-1];
      width0 = fntLyr0.clip.width;
      width1 = fntLyr1.clip.width;
   return (width0 != width1);

Using checkIfInstalled()

checkIfInstalled() expects two arguments:

a string font name to test
a Boolean, or 0/1, specifying whether the page has loaded or not.

The function returns a Boolean value representing the existence of the font.

Therefore, if you wanted to place a right arrow icon on your page, while the page was still loading, you could do it in this way:

Go to next Page
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
   isDing = checkIfInstalled("Webdings",0);
   if (!isDing) isDing = checkIfInstalled("Marlett",0);
   str = (isDing) ? "<FONT FACE='Webdings'>4</FONT>" : "<IMG SRC='tri.gif' WIDTH=12>";
   <IMG SRC='tri.gif' WIDTH=12>

In the above example, a little extreme since it accounts for non-JS browsers as well, we attempt to save the user an image download.

We call checkIfInstalled(), passing "Webdings" as the first argument, since we are testing for the existence of the Webdings font. The second argument is 0, since we are calling the function in the HTML page, while it's loading, and not after load in a dynamic script.

The existence of Webdings is assigned to isDing. If isDing is false (Webdings does not exist,) we check for the Marlett font.

We next create an HTML string to be dynamically written to the page. If we have found a usable font, we write a FONT tag that encloses the number 4, which in Webdings or Marlett, displays a right arrow icon. If not, we write a IMG tag, loading the icon as an image.

If the browser does not support JavaScript, then it sees IMG tag included as HTML enclosed in a NOSCRIPT tag.

On the next page, we'll examine the function statements in detail.

Produced by Peter Belesis and

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