How to use the Google Web Fonts API

Hello! This video tutorial shows how to use Google Web Fonts API to add web fonts to your HTML pages.

You may want to use custom web fonts on your HTML website to apply them to specific elements of your pages.

Let’s learn how to do that.

Firstly you need to get the link rel attribute for the font you want to add to your site.

1. Navigate to Google Web Fonts site and choose the font you want to use.

   Use the filter on the right hand side to get fonts options that fit your needs:

   

2. Hover the desired font name and click “See Specimen” button:

   

3. On the font page check the font description to make sure this is the font you need.

   Then, click “Select This Font” button at the upper right:

   

4. Now that the font is selected, click the bar which appeared at the bottom right corner of the screen:

   

5. At the appeared popup look for the embed code:

   <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">

6. Copy the code to the clipboard and paste it to the head tag of your index.html file:

   

   Do not forget to save the file to apply changes.

   You will need to include the font to each of your HTML files.

7. Now, navigate back to the font page and look for CSS rule there:

   font-family: 'Roboto', sans-serif;

8. Use this rule for the CSS selector of desired section on your site, e.g.:

   body {
   	font-family: 'Roboto', sans-serif;
   }

   The above CSS rule will apply the newly added Roboto font to the body text of your website:

   

9. Save the file to apply changes.

10. Navigate to your site and refresh the page to see changes.

    You can see the Roboto font is applied to the body text of your site now:

    

This is the end of the tutorial. Now you know how to use Google Web Fonts API to add web fonts to your HTML pages.

Feel free to check the detailed video tutorial below: