Using TypeKit's WebFontLoader for Canvas text

Question

I'm having a hard time using fonts loaded via the TypeKit webfontloader as font faces for text that is drawn on a canvas element.

I boiled it down to the following test case:

WebFont.load({
    google: {
      families: ['Droid Sans', 'Droid Serif']
    },
    monotype: {
        projectId: 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx' //this is valid & working
    },
    fontactive : function(font, fvd){
        testFont(font, fvd, 'active');
    },
    fontinactive : function(font, fvd){
        testFont(font, fvd, 'inactive');
    }
});

function testFont(font, fvd, state){

    console.log('loaded ' + state, font, fvd);

    var $canvas = $('<canvas>').attr({width: 400, height: 100}).appendTo($('body'));
    var canvas = $canvas[0];
    var ctx = canvas.getContext('2d');

    ctx.fillStyle = 'black';
    ctx.font = '30px ' + font;
    ctx.fillText('CANVAS PARTY YALL!', 50, 50);

}

The callbacks for each font will fire, yet the font isn't used in the canvas text. One strange aspect is that the fonts loaded from fonts.com (the monotype) part do declare themselves as fontinactive, yet I can apply them to all HTML without problems. The Google fonts will always fire a fontactive.

The other strange aspect is that the Google Fonts will display in one of about 20 cases, yet when I wrap my testFont function inside a setTimeout with a delay of 1000ms this behavior reverses and makes the fonts.com font display from time to time.

All this leads me to the conclusion that the handlers probably fire too early, but I have no clue what to do about this (instead of hacky stuff like timeouts and praying). Any idea what I am doing wrong or what I could do to fix this?

EDIT: To add to the confusion I just noticed that the fonts.com font is actually working perfectly fine in IE9. All other browsers seem to do the things I described above.

Answer 1

Ok, so I did find out that everything is working fine when I do not hide elements of .wf-loading via my Stylesheet so I do not use:

.wf-loading{
    display: none;
}

anymore but use screen offset to hide unrendered elements.