Webfonts have transformed our webpages into much more individualistic products, but they have one drawback: There's no standard method to detect when a webfont has actually loaded. Even though we try to always specify a good font stack to fall back on in the font-family declaration, sometimes we really need to know if or when a webfont has successfully been loaded - usually so we can adjust some other part of the page to match it to pixel-perfection.

The FontDetect.js library provides a singleton class that can tell you which font is being used for a particular element, or detect whether a font face is available in your browser. It can also poll for the font being loaded and call a callback function when it loads - or another callback if it doesn't load within a timeout period.

How to Use FontDetect

The first step is to download the current version of fontdetect.zip and extract the script file (fontdetect.js or fontdetect.min.js). It can be placed after the tag if you wish.

<script type='text/javascript' src='/path/to/fontdetect.js'></script>

FontDetect provides three methods you can call. The first method, FontDetect.isFontLoaded, returns immediately with true or false depending on whether the specified font is present. This is most useful when you want to make sure an internal browser font is present:

<style> #theContainerDiv { font-family: Trebuchet MS, Verdana, sans-serif; } </style> if (!FontDetect.isFontLoaded('Trebuchet MS')) { // Assume we fell back to Verdana, so adjust the column width. $('#theContainerDiv').css('width', 500); }

The FontDetect.whichFont method is perhaps more useful: It tells you exactly which font in the font stack is being used for a given element:

<style> #theContainerDiv { font-family: Oxygen, Verdana, Arial, sans-serif; } </style> var wContainer; switch (FontDetect.whichFont('#theContainerDiv')) { case 'Oxygen': wContainer = 500; break; case 'Verdana': wContainer = 480; break; default: wContainer = 510; break; } $('#theContainerDiv').css('width', wContainer);

Finally, there's FontDetect.onFontLoaded. This waits asynchronously until the font gets loaded, or until a timeout period ends. Either way it calls a callback function that you specify:

$(document).ready(function(){ FontDetect.onFontLoaded ('MyCoolFont', onMyCoolFontLoaded, onItDidntLoad, {msTimeout: 3000}); }); function onMyCoolFontLoaded (p_fontName) { alert (p_fontName + ' looks good!'); } function onItDidntLoad (p_fontName) { alert (p_fontName + ' didn\'t load within 3 seconds'); }

When you call FontDetect.onFontLoaded, you can specify how often to poll for the font (default is 100 ms, or 10 times/second); how long to try before giving up (default is 2 seconds), and the callback functions on successful or failed loads.

Try it out

The original FontDetect project page has a nifty demo of the library in action. It's been updated to use the latest version of the library: Demo page

Downloads

The fontdetect zip files contain both source & minified versions of the FontDetect JavaScript file. You can also find the FontDetect project on GitHub.

Release dateVersionFilename
11-oct-2014 3.0.1 fontdetect.zip
08-oct-2014 3.0.0 fontdetect.3.0.0.zip
17-aug-2012 2.1 fontdetect.2.1.zip
02-jun-2012 2 fontdetect.2.zip
12-apr-2012 1 fontdetect.1.zip

The API

FontDetect.onFontLoaded ( fontname, onLoad, onFail, { msInterval: ms between polls , msTimeout: how long to keep polling })

This method polls for the existence of a font in your browser. When a font gets loaded or a timeout period has passed, it will call the specified callback function.
Required parameters
fontname
string 		The fontname of the webfont you want to detect.
onLoad
function 		A callback function that will be called when the font gets loaded. Use null if you don't have one.

The callback function takes one parameter: The fontname that was detected.

You must supply at least one callback: this one or onFail, below.

onFail
function 		A callback function that will be called if the font doesn't get loaded within the timeout period. Use null if you don't have one.

The function takes one parameter: The fontname that failed to load.

You must supply at least one callback: this one or onLoad, above.

{Optional named parameters}
msInterval:
integer 		How many milliseconds between polling for the font. Default is 100ms.
msTimeout:
integer 		How many milliseconds to keep polling before giving up & calling the onFail callback. Default is 2000ms.

FontDetect.whichFont (element)

This method tells you something that calling an element's computed style should tell you but doesn't: It determines which font, out of the fonts specified in the element's font stack, is actually being used to render it.
Required parameters
element
string or object 		The element to examine. If it's a string, it should be a jQuery selector expression. If it's an object, it should be the jQuery or DOM element itself.
Returns
string The name of the font that is being used for this element.

FontDetect.isFontLoaded (fontname)

This method determines whether a given font is loaded.
Required parameters
fontname
string 		The name of the font to check for.
Returns
boolean true if the font has been loaded, else false if it didn't load or isn't provided by the browser.

Prior art, or: GMTA!

This library by Lalit uses a similar overall approach to detecting the presence of a font. However FontDetect tests each font using the full upper & lower case alphabet in a large point size, so it should in theory be better at detecting webfonts that are very similar to the default fonts.