Identifying Installed Fonts - DHTML Lab | 8 | WebReference

Identifying Installed Fonts - DHTML Lab | 8


Identifying Installed Fonts
Alternate IE-only version

The one clunky element of our technique is the necessity to specify the page state (loaded or not loaded) when calling the function. This is necessary for Navigator, which does not have a built-in way to provide us with page state information. We could define a Boolean which changes value upon load, like we have in other scripts, but we have attempted to keep all code within one function, so you can easily cut and paste.

Explorer, however, has the readyState property of the document. We have used it in our Hierarchical Menus Script.

In a controlled IE-only environment, you can use this variation with one argument only:

function checkIfInstalled(fname){
   loaded = document.readyState == "complete";
   teststr = "font existence test"
   if(!window.fntLyr0) {
      lyrstr0 = "<SPAN ID=fntLyr0 STYLE='position:absolute;width:30;font:12pt Courier'>"+ teststr +"</SPAN>";
      lyrstr1 = "<SPAN ID=fntLyr1 STYLE='position:absolute;width:30;font-size:12pt'>"+ teststr +"</SPAN>";
      if (loaded) {
      else {
   } = fname +",Courier";
   width0 = (isMac) ? fntLyr0.offsetWidth : fntLyr0.scrollWidth;
   width1 = (isMac) ? fntLyr1.offsetWidth : fntLyr1.scrollWidth;
   return (width0 != width1);

Adapting our earlier example, the function can be called in this way:

isDing = checkIfInstalled("Webdings");
if (!isDing) isDing = checkIfInstalled("Marlett");
if (isDing) { do this }
else { do that }

Hopefully, you can find good uses for this technique. Remember that, although any font can be checked for in this way, it is a good idea to only check for dingbat fonts that will save bandwidth and make your Web pages and applications look more like OS programs.

Produced by Peter Belesis and

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