Loading custom fonts with webfont.js

I'm working on a project where I'm trying to use some 5 custom fonts.

I use webfont.js library so that I can time my initialisation the way I want to.

However, I notice that I have an intermittent issue, whereby webfont.js will fail loading all 5 fonts 75% of the time. If I ignore the error (inactive handler) and just resume loading my site I can see all custom fonts fine.

This is annoying because webfont.js takes around 4 seconds to raise the inactive event and so the user just sees the blank page while this is happening.

How do I fix (or at least debug) this?

This is my setup (util.js):

var mutexFontsLoaded = $.Callbacks("memory once");
WebFontConfig = {
  custom: {
    families: ['Chennai-Regular', 'Chennai-Light', 'Chennai-Bold', 'Quicksand-Bold', 'Segoe-Print'],
    urls: ['css/fonts.css']
  },
  loading: function () { console.log("Loading fonts.."); },
  active: function () { mutexFontsLoaded.fire(); },
  fontinactive: function (font, fvd) { console.log("Could'nt load " + font + " font"); },
  inactive: function () { console.log("All fonts failed loading..\n\rTrying to load site anyway.."); mutexFontsLoaded.fire(); }
};

Followed by the Web Font Loader library - 1.5.1

Then in my main script:

$(document).ready(function () {
    mutexFontsLoaded.add(function()
    {
        application.init();
    });
});

Solution

Debugging the webfont.js library from google's CDN made me see the issue.

Webfont.js injects a <span> with a test string into the <body> DOM element. It then sets the custom font on this span and repeatedly calculates width of the <span> to test for any changes. If it captures a change then it assumes the custom font has loaded. If no change is detected within a timeout then it signals failure.

In my case <body> element was hidden with display: none; because I only wanted to show the page once I knew all the elements are downloaded. Because of this the injected <span> never changed its calculated width.

Finally fixed!