Introduction to the Google webfonts API

Introduction to the Google webfonts API

Introduction to the Google webfonts font API

Use free Google webfonts to make your website even more awsome! These fonts are really easy to embed insode your own webpage, and there are many different fonts submitted to the Google webfonts program. Read our short tutorial on how to embed custom fonts inside your personal websites!

So now, how can I do include a webfont?

Calling the API is done by assigning a href to the style attribute in your HTML. As shown below:

Next, you declare the font in your css selector, if you like to use the custom font in your whole document you declare it like this:

 body {
        font-family: 'Nobile', serif;
        font-size: 48px;
      }

If you want to specify a font for a certain div, you create a div and link this to the font like this:

Inside your css file:

#differentFont{
        font-family: 'Nobile', serif;
        font-size: 18px;
      }

inside your html file:

the full html page would look something like this:

Can I use every free font?
Google has collected several fonts in a list which can be found right over here. In the future this list will be updated.

So now you’ll know how to customize a webpage with custom fonts!
Enjoy!


About the Author

Lode is a Creative-Geek with passion for webdesign, SEO and everything related to online marketing. In January 2014, he has started his own company Magnefk, which specialises in online marketing and website optimization.