How can I detect when a google web font is ready and displayed in the page?

Question

I need to trigger an action as soon as the fonts in my page switch to google's. (I'm using the css mode) Is there any DOM Event fired at the font switch?

Answer 1

David Walsh has a guide to using the Google Webfonts API here: http://davidwalsh.name/google-fonts-api

Here's an example from his post:

WebFontConfig = {
    google: {
        families: [ 'Tangerine', 'Cantarell' ]
    },
    /* Called when all the specified web-font provider modules (google, typekit, and/or custom) have reported that they have started loading fonts. */
    loading: function() {
        // do something
    },
    /* Called when each requested web font has started loading. The fontFamily parameter is the name of the font family, and fontDescription represents the style and weight of the font. */
    fontloading: function(fontFamily, fontDescription) {
        // do something
    },
    /* Called when each requested web font has finished loading. The fontFamily parameter is the name of the font family, and fontDescription represents the style and weight of the font. */
    fontactive: function(fontFamily, fontDescription) {
        // do something
    },
    /* Called if a requested web font failed to load. The fontFamily parameter is the name of the font family, and fontDescription represents the style and weight of the font. */
    fontinactive: function(fontFamily, fontDescription) {
        // do something
    },
    /* Called when all of the web fonts have either finished loading or failed to load, as long as at least one loaded successfully. */
    active: function() {
        // do something
    },
    /* Called if the browser does not support web fonts or if none of the fonts could be loaded. */
    inactive: function() {
        // do something
    }
};

/* async! */
(function() {
var wf = document.createElement('script');
wf.src = ('https:' == document.location.protocol ? 'https' : 'http') + '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
wf.type = 'text/javascript';
wf.async = 'true';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(wf, s);
})();

Answer 2

Not sure if this is what you need but you may give it a try. If you use WebFont Loader then may be you can track it.

The WebFont Loader is a JavaScript library that gives you more control over font loading than the Google Web Fonts API provides. The WebFont Loader also lets you use multiple web-font providers. It was co-developed by Google and Typekit.

You can do it using some callbacks like loading(), active(), fontactive(fontFamily, fontDescription) e.t.c. or checking some class attributes.

Here it is, hope it'll help you.