preloadjs for font preloading in canvas

I use preloadjs for font loading (the font is local to my computer) in a canvas area but the font is displayed only after a page refresh. The text is in my_text and the font is the "digital-7.ttf" in the following code:

var stage = new createjs.Stage("canvas");

var queue=new createjs.LoadQueue();
var counter=0;

queue.on("complete",handleComplete);
queue.on("fileload", handleFileLoad);
queue.loadManifest([
        {id:"f1",src:"css/digital-7.ttf"}
                ]);

function handleFileLoad(event){
   counter+=1
   console.log("asset "+ counter+" loaded");
}
function handleComplete(event){
    console.log(counter);

    var my_text=new createjs.Text("hi there!","20px digital-7","black");
    my_text.x=465;
    my_text.y=100;
    stage.addChild(my_text);
    stage.update();
}

//stage.update();

This is of course very irritating. Why is the font displayed only after page refresh? Any thoughts?

Solution

There are two issues, both aren't your fault:

Firstly, PreloadJS is not interpreting your file as a "font". Normally, the file extension should be enough to determine the preload type, but it looks like its just trying to load it as plain text. You can get around this with a type attribute:

queue.loadManifest([
    {id:"f1", src:"digital-7.ttf", type:"font"}
]);

Note that since only single-url-based fonts can be determined by a source, solving this in PreloadJS will only catch this one usage.

Secondly, the "font family" in CSS is derived in the FontLoader from the font name. Unfortunately, your font has a dash in it, which is stripped out. "Digital-7" becomes "digital7". If you use "digital7", it will work properly.

var my_text=new createjs.Text("hi there!", "50px 'digital7'", "black");

This is not well documented, so I will ensure it gets updated.

Hope that helps!