Question

I’m loading google web fonts to display some text strings.

What I want to do is, if in any case if Google web fonts fails to load (maybe a time out or network issue etc etc), I want to display an image instead of falling to the font family stack.

So is there a way to detect that Google web fonts has been successfully loaded or not; so that I can implement something like

if (Google webfont loads successfully) {
    //display the string using that font
} else {
    //display an image instead
}

Answer 1

The webfont load request will yield class attributes on the HTML node of your page. Using the Google Webfont Loader (which I’m assuming the Google type service uses, along with Typekit), the following classes will indicate status:

1. wf-inactive (the one you’re looking for)
2. wf-loading
3. wf-active

In addition, you’ll have font-specific classes, such as wf-myfont-active.