title: Using my own fonts inside a canvas
body: <p>I'm trying to use my own font inside a canvas, can't make it work. (The browser uses the default font instead.)</p>
  
  <pre><code>    &lt;style type="text/css"&gt;
          @font-face {
              font-family: "typewriter";
              src: url("TravelingTypewriter.ttf") format('truetype');
          }
      &lt;/style&gt;
      &lt;script&gt;
          window.onload = function(){
              var canvas = document.getElementById("canvas");
              var context = canvas.getContext("2d");
              var image = new Image();
              image.onload = function(){
                  context.drawImage(image, 0, 0);
                  context.font = "40pt typewriter"
                  context.fillText("text", 40, 40);
              };
              image.src = "Open Book.png"; 
          }   
      &lt;/script&gt;
  </code></pre>
  
  <p>What am I doing wrong?</p>