Looking to make your Blogger Templates design better? Google Font API for BloggersYou no longer need to be designer now! With few lines of additional codes in your templates, you can change its look with smart fonts. Yes, I am talking about Google’s Font API that will make the process of including non standard fonts in our blogger templates a lot easier. In this tutorial, I want to include details on how you can easily implement different fonts available from Google’s Font directory in your template to make it look beautiful and thus better.

First, Google’s Font API

Google’s Font API is simply a web font service that allows you to use the available fonts in its Google Font directory for your designs and most importantly it is Open Source and served by Google servers.

Google Font Directory

The fonts available in the Google Font directory are all open source and you can quickly use them with simple clicks and codes. The below screenshot shows some fonts (till the time of writing this post) you can use for your templates or projects.

Google Font Directory Blogger

Steps for Adding to your Blogger Template

Well, if you learnt enough about the Google’s Font API and now want to implement in your blogger template, let’s get started.
1. Go to the Google’s Font Directory and click on the font you want to use. For example in this tutorial, I have chosen the Droid Serif.

Google Font Droid  Serif
2. Now navigate to “Get the Code” button which is highlighted on your right.

The Code for the Droid Sans will be

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

3. Now see the below screenshot and copy the code you need to use for your Blogger Template.

Google Font API
4. After you have copied this code, go to your Blogger Template you want to add this font to; and Navigate to the Edit Html Tab. See image below. (we are now going to edit your Blogger Template)

Blogger Edit Html
5. Search for the tag <head> in your Template and add the above copied code directly after it.

Edit Html Blogger Head
6. Wait as blogger uses strict HTML markup and considers the original font embed code to be an open tag you also need to add forward slash (/) just before the closing “>” symbol in your code, so that the code can be properly parsed and thus the code for Droid Serif becomes

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

7. Save your Template.

8. One more Step before you can start using it. The above steps added the CSS file to support the font. And now we need to define where we need to apply the font in our theme. In order to define where we need to apply that, we need to add some additional style statements to the section of our template.

Don’t be confused! For example if I need to Use the Droid Serif font to my h3 title in my blog, then I would add the following line just beneath the closing tag </b:skin> :

 h3.post-title {font-family: Cantarell, Sans=Serif;} 

9. Now after you have decided where to apply the font, just change the font-family name to the required font.
The Following references and text areas to look for also can help you decide where you need to apply the font.

Description Reference
The header section (title and description) #header
Blog title h1
Post titles .post-title
Body of blog posts .post-body
Sidebar headings #sidebar h2
Sidebar text #sidebar .widget-content
Footer section .footer

10. And once you have added that required CSS, you can preview to see it in action in your template. Try using different fonts and see which font suits your template better.
11. You can finally save changes to your template if you like it.

Still Found it Confusing ?

Check the Below video from Net Tuts that helps you learn the simple concept behind it and you can go through the steps again for the Blogger.

How can this benefit the Blogger Template Designers?
This can be the easiest Web font solution if you are a designer. It’s as easy as Copy and Paste; you don’t need to go through the process of sign ups and getting licence to use this with your designs.

Additional Resources for Using / Understanding Google Font API

Have Something to say?

Personally, i found this Google API appealing for design. How do you take it? Are you gonna make use of it? Let us know in the comments below? or Are you stuck with the above tutorial. I am always happy to help. Just leave a comment below.

Published by Pradeep Singh

Pradeep is your host at BloggerUser helping you to build your blog by providing Blogger tips, tutorials, guides, free blogger templates and more.

6 Comments

  1. […] 7. And that’s it. You can Update the file and See the changes live in your wordpress blog. If you are looking to use it in your blogger blog, then Blogger User has a detailed post “Make Blogger Template look better with Google’s Font API“. […]

  2. nice tips..thank you blogger user….

  3. these fonts look fantastic,,,especially lobster..thx mate

  4. The above steps added the CSS file to support the font. In order to define where we need to apply that, we need to add some additional style statements to the section of our template. And now we need to define where we need to apply the font in our theme..One more Step before you can start using it?

  5. Bloggeruser site is “Powered by WordPress”

    Isn’t that ironic?

    🙂

  6. […] 7. And that’s it. You can Update the file and See the changes live in your wordpress blog. If you are looking to use it in your blogger blog, then Blogger User has a detailed post “Make Blogger Template look better with Google’s Font API”. […]

  7. This is very interesting, You’re a very skilled blogger. I’ve joined your rss feed and look forward to seeking more of your wonderful post. Also, I’ve shared your web site in my social networks!

  8. Nice post. I enjoyed reading your article. It’s very informative. Thanks

  9. […] 7. And that’s it. You can Update the file and See the changes live in your wordpress blog. If you are looking to use it in your blogger blog, then Blogger User has a detailed post “Make Blogger Template look better with Google’s Font API“. […]

Comments are closed.

Error: Please enter a valid email address

Error: Invalid email

Error: Please enter your first name

Error: Please enter your last name

Error: Please enter a username

Error: Please enter a password

Error: Please confirm your password

Error: Password and password confirmation do not match