title: HTML5 Canvas doesn't display any text using CSS3's @font-face
body: <p>My HTML document is:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt; 
  &lt;HTML&gt; 
      &lt;HEAD&gt; 
          &lt;meta charset="utf-8"&gt; 
      &lt;style&gt;
        @font-face {
          font-family: "canvas";
          font-style: normal;
          font-weight: normal;
          src: local('JesterRegular.woff'), url('JesterRegular.woff') format('woff');
        }
      &lt;/style&gt;
          &lt;title&gt;Interactive&lt;/title&gt; 
      &lt;/HEAD&gt; 
      &lt;BODY&gt;
        &lt;div style="font-family: canvas"&gt;test&lt;/div&gt;
      &lt;canvas id="simulator"&gt;
        &lt;h1&gt;Your browser doesn't support this element.&lt;/h1&gt;
      &lt;/canvas&gt;
      &lt;script type="text/javascript" src="elements.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="backgroundgen.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript" src="tileengine.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript" src="simulator.js"&gt;&lt;/script&gt; 
      &lt;/BODY&gt; 
  &lt;/HTML&gt;
  </code></pre>
  
  <p>The applicable portion of my javascript from <code>backgroundgen.js</code> is:</p>
  
  <pre><code>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);
  }
  </code></pre>
  
  <p>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 <code>&lt;div&gt;</code> tag in the HTML, still no joy.  The contents of the <code>&lt;div&gt;</code> tag display fine, proper canvas font, just nothing in the canvas.  For the record, I am running Chromium v12 and Firefox v6 on Ubuntu.</p>
  
  <p>To clarify,  Chromium's javascript console doesn't report any errors, and Firefox's error console doesn't report anything either.</p>