Time for action – embedding a font from the Google Fonts directory

Google Fonts directory is a web font service that lists free-to-use web fonts. We will embed a web font chosen from the Google Fonts directory:

1. Go to the Google Fonts directory site at http://google.com/fonts.
2. In the font directory, there is a list of web fonts that are available under an open source license and can be used freely.
3. Choose one of them and click on the font name to proceed to the next step. In this example, I used Droid Serif.
4. After you click on a font, the font directory displays detailed information about the font. There are several actions that we can carry out here, such as preview the font, choose from variants, and most importantly, get the font embedding code.
5. In MAC, click on the Get the code tab and you will see the following screenshot; this shows a guide on how to embed this font into our web page. Alternatively, in Windows, you can click on the Use tab and you will find instructions to get the code:
   
6. Copy the link tag provided by Google, and then paste it into the HTML code. This should be placed before any other style definition:

   <link href='http://fonts.googleapis.com/css?family=Droid+Serif:regular,bold&subset=latin' rel='stylesheet' type='text/css'>

7. Now, we can use the font to style our text. Set the body's font family property as the following code:

   body {
     font-family: 'Droid Serif', Arial, serif;
   }

8. Save all the files and open the index.html file. The browser will download the font from the Google server and embed it into the web page. Keep an eye on the fonts; they should be loaded and rendered as our selected Google font.
   

What just happened?

We have just styled our game with an uncommon web font. The font is hosted and delivered through the Google Fonts directory.

Besides using the font directory, we can embed our font file by using @font face. The following link provides a bulletproof approach to embed a font ourselves:

http://www.fontspring.com/blog/the-new-bulletproof-font-face-syntax

Tip

Check the font license before embedding

Normally, the font license does not cover its usage on web pages. Be sure to check the license before embedding the font. All the fonts listed in the Google Fonts directory are licensed under the open source license and can be used on any website. You can check the license of inpidual fonts listed in the directory at https://www.google.com/fonts/attribution.

Choosing different font delivery services

Google Fonts directory is just one of the font delivery services. Typekit (http://typekit.com) and Fontdeck (http://fontdeck.com) are two other font services that provide hundreds of high quality fonts via yearly subscription plans.