Using font-face fonts with canvas fillText

Question

EDIT: 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... :)

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.

This is my Javascript 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';
        }

This is in my CSS

@font-face {
font-family: 'Visitor';
font -style: normal;
font-weight: normal;
src: url('fonts/visitor.woff') format('woff');

If I change this line:

  ctx.font = 'normal 12px Visitor';

With 'normal 12px Arial' works fine. If I use the custom "Visitor" font, it just changes the favicon but I can't see the number.

Any idea on what could be the problem?

Check out my solution for using an element to load the font: http://stackoverflow.com/questions/8198967/html5-canvas-filltext-and-font-face/8222880#8222880 — a paid nerd, Nov 22 '11 at 07:48
You could also load the font using a data url in your CSS, which works for me. — Blaise, Nov 25 '12 at 21:22
Yes please post your edit as an answer and accept it so this no longer shows up in the unanswered queue, and its easier for people with this problem to find the answer — Simon Sarris, Mar 08 '14 at 04:10
Beware, the hidden div tricks seems not always to work. I'm sorry i can't tell now in which configuration, but i've seen it failed - If it works for your target Browsers, this is not an issue - — GameAlchemist, Apr 14 '14 at 15:35

score 1 · Answer 1 · answered Dec 18 '14 at 01:08

Arial is a web safe font, meaning that it will be shown no matter what computer or mobile device you have (aka fallback).

Here is some example code with Pacifico from Google Fonts (which isn't a web safe font).

<link href="http://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet" type="text/css">
<script>
 window.onload=function() {
  var canvas = document.getElementById("canvas");
  var context = canvas.getContext("2d");
  context.fillStyle = "blue";
  context.font = "16pt Pacifico";
  context.fillText("Cursive font", 50, 50);
 }
</script>
<canvas id="canvas" width="200" height="200"></canvas>

It should be possible with other fonts.

Make sure your @font-face has font-style: normal; and font-weight: 400;.

Using font-face fonts with canvas fillText

1 Answers1