CUSTOM FONTS

You can use @font-face as long as
you have used the font on some text
PRIOR to manipulating the canvas -
otherwise the canvas won't pick up the font.


<style type="text/css">

@font-face { /* FONT FROM GOOGLE */
  font-family: 'Knewave';
  font-style: normal;
  font-weight: 400;
  src: local('Knewave'), local('Knewave-Regular'), url(http://themes.googleusercontent.com/static/fonts/knewave/v2/QoIkQCg7-RvNFDCSqflgfQLUuEpTyoUstqEm5AMlJo4.woff) format('woff');
  }
  
body,td,th {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 20px;
  }
  
body { background-color: #000; color: #FFF; margin-left: 40px; margin-top: 20px; }

.newfont { font-family: Knewave; font-size: 40px; color: #FF0; }
pre { font-size: 10px; font-family:"Lucida Console", Monaco, monospace; color:#FFF; }

</style>

<script>
 var canvas;
  var context;
  
function init() {
  
  canvas = document.getElementById("myCanvas");
  context = canvas.getContext("2d");
  
  drawBkgd(); // COVER TRANSPARENT CANVAS
  create(); // THIS IS WHERE AL HAPPENS
  
  }
  
  function drawBkgd() { // USE THIS AREA TO MODIFY BKGD
  context.fillStyle = "red";
  context.fillRect(0,0,canvas.width, canvas.height);
  }
  
  function create() { 
  context.fillStyle = "black";
  context.font = "normal 80px Knewave"; // NOTICE THIS NEW FONT
  context.textAlign = 'center';
  context.fillText("HOLA!", canvas.width/2, canvas.height/2);
  }
  
</script>