A very common problem is how to preload a font before running your canvas application. You will easily find that you have this problem on your hands if text suddenly appears, or starts out as a different font (Flash Of Unstyled Font). One way to fix this issue is to use Google Web Font Loader. There are many tutorials on how to do with with web fonts, but not many with local fonts (your own fonts that you are serving). Here is an example with a simple application:

Let's assume you have some fonts that you want to use for your application stored under fonts/ directory. Your CSS file fonts.css will look something like this:

@font-face {
    font-family: "digital";
    src: url('fonts/digital-7 (mono).ttf');
}

Your HTML file may look something like this:

<body onload="myMain()">
    <canvas id="mainCanvas" width="600" height="600"></canvas>
</body>

You will have to change the HTML file to not load immediately, because the issue arises from the browser's asynchronous loading of the font. This means that the font may not be ready when your javascript code finally runs. To call the myMain() function only when the fonts load, we will use Google Web Font Loader. This way, the font will be pre-loaded and we can use that font in the canvas.

To do that, all you have to do is remove your call from the body's onload and add it to the activate callback from the WebFontConfig:

<script>
    // load fonts before loading the game
    WebFontConfig = {
        custom: {
            families: ['digital'],
            urls: ['fonts.css']
        },
        active: function() {
            myMain();
        }
    };
</script>
<script src="//ajax.googleapis.com/ajax/libs/webfont/1.4.7/webfont.js"></script>

Make sure to put the two scripts in that order! This is important because you must first create the WebFontConfig object which the webfont.js script will look for. Putting it all together, your HTML file will look like this:

<!DOCTYPE html>
<html lang="en-us">
  <head>
    <meta charset="utf-8">
    <title>HTML 5 WebApp</title>
    <script src="snake.js"></script>
    <script>
      // load fonts before loading the game
      WebFontConfig = {
        custom: {
          families: ['digital'],
            urls: ['fonts.css']
        },
        active: function() {
          myMain();
        }
      };
    </script>
    <script src="//ajax.googleapis.com/ajax/libs/webfont/1.4.7/webfont.js"></script>
  </head>
  <body>
    <canvas id="mainCanvas" width="600" height="600"></canvas>
  </body>
</html>