HTML5 Canvas doesn't display any text using CSS3's @font-face

Question

My HTML document is:

<!DOCTYPE html> 
<HTML> 
    <HEAD> 
        <meta charset="utf-8"> 
    <style>
      @font-face {
        font-family: "canvas";
        font-style: normal;
        font-weight: normal;
        src: local('JesterRegular.woff'), url('JesterRegular.woff') format('woff');
      }
    </style>
        <title>Interactive</title> 
    </HEAD> 
    <BODY>
      <div style="font-family: canvas">test</div>
    <canvas id="simulator">
      <h1>Your browser doesn't support this element.</h1>
    </canvas>
    <script type="text/javascript" src="elements.js"></script>
    <script type="text/javascript" src="backgroundgen.js"></script>
        <script type="text/javascript" src="tileengine.js"></script>
        <script type="text/javascript" src="simulator.js"></script> 
    </BODY> 
</HTML>

The applicable portion of my javascript from backgroundgen.js is:

drawTitle: function() {
  BackgroundGen.context.fillStyle = BackgroundGen.titleBGColor;
  BackgroundGen.context.fillRect(0,0,BackgroundGen.canvas.width,30);
  textXpos = BackgroundGen.canvas.width/2;
  BackgroundGen.context.textAlign = "center";
  BackgroundGen.context.font = '20px "canvas"';
  BackgroundGen.context.fillStyle = "rgb(0,0,0)";
  BackgroundGen.context.fillText(BackgroundGen.titleText, textXpos, 15);
}

When using the custom "canvas" font, no text is displayed at all. If I replace canvas with a typical font, say arial for example, it displays fine. I've adapted the technique of loading the font before displaying it in my canvas with the <div> tag in the HTML, still no joy. The contents of the <div> tag display fine, proper canvas font, just nothing in the canvas. For the record, I am running Chromium v12 and Firefox v6 on Ubuntu.

To clarify, Chromium's javascript console doesn't report any errors, and Firefox's error console doesn't report anything either.

See http://stackoverflow.com/questions/2756575/drawing-text-to-canvas-with-font-face-does-not-work-at-the-first-time/8223555#8223555 — a paid nerd, Nov 22 '11 at 07:50

score 2 · Answer 1 · edited Sep 25 '12 at 19:32

Example code:

<html>
  <head>
    <style type="text/css">
      @font-face {
        font-family: YourFontName;
        src: url(your/very/long/URL/here)
    </style>
    <script>
      function onloaded() {
        //your code canvas code goes here
      }
    </script>
  </head
  <body onload="onloaded()">

  <canvas id="somecanvasid"></canvas>

  </body>
</html>

The function onloaded will act as callback and will be executed when all the content of the HTML document is loaded. You should define it in the HTML document so it is included when everything else has finished loading.

score 2 · Accepted Answer · answered Sep 10 '11 at 17:14

It looks like embedded fonts should work in <canvas>, but you have to ensure the font is completely loaded before drawing. This means using a <div> to force the browser to load the font, then waiting to draw until after it has downloaded.

Have you tried calling drawTitle after document.load or even a setTimeout(drawTitle, 1000)?

score 0 · Answer 3 · answered Sep 30 '16 at 09:00

You can prompt download *.woff file by css like this:

body:before{
    font-family: Allura;
    height: '0px';
    overflow: hidden;
    position: absolute;
    content: "abcděůž";
}

Woff file can be splitted for some special characters, so content should include them.

But downloading woff file is still asynchronous, so it might not work if fillText() is called instantly after page load.

HTML5 Canvas doesn't display any text using CSS3's @font-face

3 Answers3