Google Font API – The Easiest Way to Use Custom Fonts Ever

Google just introduced us its new Font API. I have played around a with it and I can assure you It’s the best and simplest way to use custom fonts I’ve ever seen.

It takes less than 10 seconds to install and use a new font, and gives you full control over the fonts even with CSS 3. One of the best features is that it’s pretty fast on time loading and supports Internet Explorer 6 (aka Lost Cause).

So here’s a quick tutorial on how to use the new Google Font API on your Blogger Blog.

1 – Choosing the Font

Just go to the Google Font Directory and pick the desired font. There is a quite nice collection already, but I am pretty sure they will keep expanding it while the new API gets popular.

Once you have picked the one you want, just click it and it will take to a new page with further details about the font, how it looks, a couple of variants, etc.

2 – Get the Code!

Now just click “Get the Code”.

And copy the font code:

3 – Installing the Font

As you can see, it gives you a link to a external stylesheet, just copy it and paste between your <head> and </head> tags. Like this:

view plainprint?
  1. <head>
  2. <link href=’http://fonts.googleapis.com/css?family=Cantarell’ rel=’stylesheet’ type=’text/css’>
  3. </head>

Note: In order to get parsed, Blogger asks you to close the link tag, just add a little “/” in the end like this:

view plainprint?
  1. <head>
  2. <link href=’http://fonts.googleapis.com/css?family=Cantarell’ rel=’stylesheet’ type=’text/css’/>
  3. </head>

4 – Using the Font

Now all you have to do is to use it normally the font name in your CSS, like when you are using a general web font like Arial, but make sure you wrap the font name with ‘ and ‘. Like this example given by google:

view plainprint?
  1. h1 { font-family: ’Cantarell’, arial, serif; }

5 – Final Words

I would love to see how you have used this tutorial to improve your blog, just post your examples in the comments below and share your ideas with our community! Also if you have any questions or suggestions on how this tutorial could be improved, don’t hesitate to comment.