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();
});
});