HTML5 canvas中的fillText字体未更改为默认值

Question

What I am trying to do seems fairly simple, but I just can't get it to work properly. I am trying to change the font type of an element drawn in a HTML5 canvas. What I have is this:

function drawStaticElements(){
    /*Few other non text elements here*/

    gameScreenCtx.font = "18px Buxton Sketch";
    //gameScreenCtx.font = '18px Comic Sans MS';
    gameScreenCtx.fillStyle = "white";
    gameScreenCtx.fillText(gameScreenCtx.font, 5, 20);

    gameScreenCtx.font = "18px Buxton Sketch";
    gameScreenCtx.fillStyle = "white";
    gameScreenCtx.fillText("Number of victories: "+numberOfVictories, 5, 40);

I don't know if this can be a browser version thing or something else, but in the PC I used to develop it, the code works fine, even when uploaded to webserver. If I try to access it from another PC it just always default to a same font, I tried some more common fonts and not even Comic Sans works. The text shows the font name correctly, but it won't render in that font.

As a sample of what is happening I uploaded to a Bitballoon webserver and accessed it from 2 different computers, the result from the development computer is this:

And the result from a different computer is this:

Am I doing something wrong here?

Answer 1

Well, under normal circumstances a computer can only render fonts that are installed on the system, and even then I imagine there could be problems with their exact names and so on. As for "common fonts", these differ between operating systems -- my Linux computer doesn't have Comic Sans MS, for instance.

It certainly seems unlikely that every user (or even a large share of users) coming to your site will have your specific font installed.

A common solution to achieve a consistent look across all user devices is to use CSS3 Web Fonts that tell the browser where to download the actual font face before loading the page.