title: Using font-face fonts with canvas fillText
body: <p><strong>EDIT</strong>: Well, it seems that the font is loaded once it's used by an element on the DOM, so I just used a hidden Div with a text using the font-face font and it's working now... :)</p>
  
  <p>I'm using this code to update the favicon with a number of updates, but I would like to write the number using a custom pixel-font.</p>
  
  <p>This is my Javascript code</p>
  
  <pre><code>            var canvas = document.createElement('canvas'),
              ctx,
              img = document.createElement('img'),
              link = document.getElementById('favicon').cloneNode(true),
              updates = data;
  
          if (canvas.getContext) {
            canvas.height = canvas.width = 16; // set the size
            ctx = canvas.getContext('2d');
            img.onload = function () { // once the image has loaded
              ctx.drawImage(this, 0, 0);
              ctx.font = 'normal 12px Visitor';
              ctx.fillStyle = '#213B55';
              ctx.textBaseline="middle";
              ctx.textAlign="center";
              ctx.fillText(updates, 10, 10);
              link.href = canvas.toDataURL('image/png');
              document.body.appendChild(link);
            };
            img.src = 'favicon_new.png';
          }
  </code></pre>
  
  <p>This is in my CSS</p>
  
  <pre><code>@font-face {
  font-family: 'Visitor';
  font -style: normal;
  font-weight: normal;
  src: url('fonts/visitor.woff') format('woff');
  </code></pre>
  
  <p>If I change this line: </p>
  
  <pre><code>  ctx.font = 'normal 12px Visitor';
  </code></pre>
  
  <p>With <strong>'normal 12px Arial'</strong> works fine. If I use the custom "Visitor" font, it just changes the favicon but I can't see the number. </p>
  
  <p>Any idea on what could be the problem?</p>