Time for action – embedding a Google web font into the canvas element

Let's draw the Canvas texts with a handwriting style font:

1. First, go to the Google font directory and choose a handwriting style font. I used the font Rock Salt and you can get it from the following URL: http://www.google.com/fonts/specimen/Rock+Salt.

2. The Google font directory provides a CSS link code that we can add to our game in order to embed the font. Add the following CSS link to the head of index.html:

   <link href='http://fonts.googleapis.com/css?family=Rock+Salt' rel='stylesheet' type='text/css'>

3. The next thing is to use the font. We open the untangle.drawing.js JavaScript file and modify the context font property in the drawLevelProgress function to the following:

   ctx.font = "26px 'Rock Salt'";

4. It is time to open our game in the web browser to test the result. The text drawn in the Canvas is now using the font we chose in the Google font directory.

   

What just happened?

We just chose a web font and embedded it into...