I'm using a custom font (called with @font-face in the CSS file) inside a canvas. Since the font file needs to be loaded before it can be used inside a canvas, I am running the script after window load as follows:
$(window).load(function() {
/* Generate canvas code */
});
In IE10, it seems the code is executed before the font file is loaded. The default font (in this case Times) is used instead of the custom font. This behaviour is happening in IE10 only. Previous versions of IE supporting canvas use the correct font, as do other major browsers.
The custom font is used elsewhere on the site, outside on canvas elements. These pieces of text render correctly even in IE10, meaning the font file is correctly loaded, but the script is executed before that.
What would be the correct code to use custom fonts in a canvas? Or how would one be able to wait for a font file to be loaded before running a script? Is there an event I can bind to it?
Check out Thomas Bachem's answer (which was not the accepted answer) on this previous SO question.
He uses a timer to test if the font widths have been set. If so, your font is loaded.
Using jQuery to know when @font-face fonts are loaded?
You can also check out this web font loader co-created by Google & Typekit. This plugin gives you finer control over your font loading process if you need it.