Internet Explorer 10: $(window).load not waiting for custom fonts.

Question

I am having a problem in IE10 with a call to a JavaScript function that is supposed to occur after custom fonts are loaded. In IE9 and IE8 wrapping the call inside $(window).load had prevented the call from executing before the fonts were loaded. However, in IE10, the call is still executing on the event, but the fonts have not loaded yet. Does anybody have suggestions as to what might be going on? Thank you in advance for your help.

(function() {
    var resizeAndAttachHandlers = function (context) {
        // This code gets executed before fonts are loaded 
    };

    namespace('$.mynamespace').initialize() {
        $(window).load(function (context) {
            resizeAndAttachHandlers(context);
        });
    };
})(); 

$(document).ready(function() {
    $.mynamespace.initialize({
        .
        .
        .
    }); 
});  

Answer 1

Google Web Fonts API

If your font is loaded from Google Web Fonts API, TypeKit, Ascender, Fonts.com, or Fontdeck then you can use the Google WebFont Loader https://developers.google.com/webfonts/docs/webfont_loader

The loader has specific events that you can respond to https://developers.google.com/webfonts/docs/webfont_loader#Events It sounds like you would be interested in the fontactive callback to indicate when the web font has finished loading.

var WebFontConfig = {
    google: {
        families: [ "Tangerine", "Cantarell" ]
    },
    fontactive: function( fontName ) {
        console.log( "The font has loaded!", fontName );
    }
};
(function() {
    var webFont = document.createElement( "script" ), script;

    webFont.src = "//ajax.googleapis.com/ajax/libs/webfont/1/webfont.js";
    webFont.async = "true";

    script = document.getElementsByTagName( "script" )[ 0 ];
    script.parentNode.insertBefore( webFont, script );
})();

You can run the above code from the following jsFiddle http://jsfiddle.net/wE2W5/

Font Detect Library

If that seems to heavy handed to you there is the fontdetect library http://www.atomicjetpacks.com/blog/8 you may consider using

$( document ).ready( function() { 
    fontDetect.onFontLoaded( "MyCustomFont", 
        function fontLoaded() {
            console.log( "The font has loaded!" );
        }, 
        function fontError() {}, 
        { msTimeout: 3000 } );
});