Tuesday, June 14, 2011

Make Blogger Template look better with Google’s Font API



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
1
<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
1
<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> :
1
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.
DescriptionReference
The header section (title and description)#header
Blog titleh1
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.

No comments:

Post a Comment