Question

I have an HTML5 game project I’m currently working on, and since Arial didn’t seem fancy enough for the interface, I have been trying to get two Google Webfonts working, in order to enhance my game design.

I am trying to use these in context.fillText calls from my game canvas, but I’m facing a weird issue for which I couldn’t find any explanation.

Actually the fonts seem to randomly be, or not be downloaded (or initialized? I can’t be sure) correctly.
This is not about the cache, and I couldn’t find a “rule” of behavior to identify this by troubleshooting. Sometimes the fonts are loaded just fine the first time, and the second time, and then I can never have them showed again until I empty the cache once or twice. But this, naturally, is just an example.

I have a little piece of text that I put at the bottom of my canvas (browser comaptibility blah blah blah) in my html, which I’ve set to one of the two webfonts, and it is always rendering just fine so I can confirm this bug is entirely about canvas.

At the moment, I have those steps in my code regarding fonts handling:

HTML:

   <link href='http://fonts.googleapis.com/css?family=Londrina+Solid|Luckiest+Guy' rel='stylesheet' type='text/css'>
   <link rel=StyleSheet href="style.css" type="text/css">

CSS (a part of my style.css file):

    canvas {
...
    font-style: "Londrina Solid", "Luckiest Guy";
...
}

As you can see I tried to apply whether one or the other font to the canvas, which is a DOM element (as I read it could help things to work, on another stackoverflow post) but that didn’t change a thing.

JS:

    var fontsReady = false;
    var starting = false;
    // check if the game isn't already starting this variable is about timeOut)

    WebFontConfig = {
        google: {
            families : ['Luckiest Guy', 'Londrina Solid']
        },

        active: function() {
            console.log('All fonts are now loaded');
            fontsReady = true;
        }

    }

    var webFontsInit = function() {
            var wf = document.createElement('script');
            wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
        '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
            wf.type = 'text/javascript';
            wf.async = 'true';
            var s = document.getElementsByTagName('script')[0];
            s.parentNode.insertBefore(wf, s);
          }();

    function checkReady () {
            if (document.readyState === "complete" && fontsReady == true && starting == false) {
                console.log('States are OK');
                starting = true;
                ctx.save();
                titleScreen();
                }
            }
            else 
                setTimeout(checkReady, 500); // i think this timeout is needed, to regularly check for the game loading states (such as fontsReady)
        }

I’m testing my game on Google Chrome, and I’m using the Google Webfonts Loader snippet.
When I check the CSS while starting the game, everything runs smoothly, my loading screen (which I wrote in a standard web font to let the user know he has to wait a bit) is waiting for the fonts and the assets to be loaded (I can see the matching classes in my CSS) and the title screen doesn’t start animating until they are loaded.

Still, sometimes the fonts get displayed and sometimes they don’t and I can’t even see the frame I also display on title screen. I can’t understand why. I just have my background drawing, and no errors in the console.

Another weird part of my issue is that whenever I get the case where my Title Screen stays empty, and I have a dev tool open (such as the Chrome one I open with F12), whenever I close it, the fonts and the drawing on my title screen magically appear. I really don’t know why.

Any help would be greatly appreciated, if further information is needed, please ask me!

Answer 1

Ok, nevermind. I found out the real problem was that I hadn’t explicitly set the z-index for the two canvas I had (two layers).
It looks like the z-index, if not set in the CSS, is set by Chrome according to which element appeared first, unlike Firefox or IE. Those two create elements in the order of the html code, this is why I didn’t encounter any problems of this kind with IE9 or FF.

So, this is where the “random” in my problem came from… Now everything looks fine.

Here is the bit of CSS I have now, for setting two canvas “layers” overlapping each other with proper z-indexes :

    canvas {
        width: 320px; // those are my canvas' dimensions, put your own!
        height: 500px;
        position: absolute;
        font-style: "Londrina Solid", "Luckiest Guy";
        left: 50%;
        margin-left: -160px; // this is my trick for centering layers in the page
        top: 0;
        outline: 0;
        border: 1px solid #000;
        display:block;
    }

    #c {
        z-index:0;
    }

    #c2 {
        z-index:1;
    }