How to Use Google Web Fonts in your HTML5 Canvas

Being able to use HTML5's .filltext() and .stroketext() methods and not having to rely on rasterized text images inside a canvas is great, but it is easy to feel stuck with only being able to use the typical Arial or Times New Roman fonts that come loaded up with any browser. Without the ability to simply rely that your users will have the same fonts loaded that you do, you can have your site reference a font from Google's growing directory of web fonts so that all users will view the same font! Google's Webfonts API contains an online directory of fonts that you can not only use from any HTML or CSS on your website (Ascended Arcade is using the Ubuntu font sitewide), but from within an HTML5 canvas as well. To use any font, browse the font directory until you find the font that you want to use and click 'Use This Font'. You will be given the corresponding link reference for the font to paste into the <head> section of your website.

<link href='<a href="http://fonts.googleapis.com/css?family=Ubuntu'">http://fonts.googleapis.com/css?family=Ubuntu'</a> rel='stylesheet' type='text/css'>

You can now reference your font from any CSS like:

h1 { font-family: 'Ubuntu', arial, serif; }

But in this case, we are interested in using the font from within an HTML5 canvas. This is achieved in more or less the same way, we just have to reference the font before using the .filltext() or .stroketext() methods:

ig.system.context.textAlign = 'left';
ig.system.context.font = 'bold 12px Ubuntu';							
ig.system.context.fillStyle = '#000000';
ig.system.context.fillText( "This Text uses the Ubuntu Font!", x, y );

It couldn't be any easier!

Google's Web Font Directory