fontcustom.css,使用webfont.js加载自定义字体(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();

});

});