Canvas font does not work the first boot?

Question

This is my demo jsFiddle

HTML

<canvas id="random"></canvas>

jQuery

function Random() {
    var length = 9,
        charset = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789",
        retVal = "";
    for (var i = 0, n = charset.length; i < length; ++i) {
        retVal += charset.charAt(Math.floor(Math.random() * n));
    }
    return retVal;
}
var ctx = document.getElementById("random").getContext('2d');
ctx.font = "30px Codystar";
ctx.fillText(Random(), 30, 30);

My Question: font does not work the first boot?

Answer 1

I think your font doesn't show initially because the browser hasn't had time to download the font data for your @font-face declaration before the JavaScript code runs. Without the font data, the browser will default to its normal font.

You can probably solve this by preventing your JavaScript code from running until the browser has got the font data from Google, for instance:

window.onload = function(){
    //your code here
};