This handy little JavaScript library determines whether a font is available in your browser, or whether an external font that your page has called really got loaded.

This is very simple to use:

  1. Download fontdetect.zip.
  2. Unzip it, and load fontdetect.js (or fontdetect.min.js) on your page. You can load it after </BODY> if you prefer it there.
  3. Call FontDetect.isFontLoaded(fontname), whichFont(element), or onFontLoaded(fontname, onLoad, etc.)

The way this library works is, it creates a span offscreen and fills it with the lowercase & uppercase alphabet sized to 100px. Then, when you call isFontLoaded, it sets the font-family style to the fontname you're testing plus one of the fallback fonts (serif, sans-serif, monospace, cursive, & fantasy). It tries each of those generic fonts as the fallback in turn. If the desired font has been loaded successfully, the span's width will be the same each time, because it's now styled with that font. But if the font didn't load, each time it will fall back to one of the different generic fonts, and the width will be different each time.

In practice a failed load will normally be detected after checking serif and sans-serif; if they're set to two different fonts the chances are very good they'll produce strings of different widths. But in the unlikely event that serif & sans-serif happen to be the same width, it'll try the other fallback fonts in turn just to make sure. If all five tests are equal widths, we can be certain that the correct font was loaded.

There is one caveat: If you're testing an external font, you need to wait a bit for the font to load before you can get a reliable true/false answer. You shouldn't have to wait more than 1/2 second for the font to load. So for example, if you load an external font on pageload, then you should set a timeout in $(document).ready for 500ms, and then call isFontLoaded from there.

UPDATE: Version 3 of the FontDetect library fixes some bugs, eliminates the dependency on jQuery, and changes the library's naming convention to be more in line with modern standards: "FontDetect" instead of "fontdetect".

After perusing this Stackoverflow thread, it turns out that Great Minds Think Alike: This library by Lalit uses a similar approach to determining if the font has loaded.