You 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.
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.
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.
2. Now navigate to “Get the Code” button which is highlighted on your right.
The Code for the Droid Sans will be
1 |
3. Now see the below screenshot and copy the code you need to use for your Blogger Template.
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)
5. Search for the tag
<head> in your Template and add the above copied code directly after it.
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 |
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.
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.
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.
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
- Google Fonts API use on Net Tuts
- Google Font API home page
- Getting started with the font API
- Google Web Fonts FAQ
- How to use the new Google Font API (DesignShack)
- Google Font API in Use for Bloggers
- Introducing the Google Font API and Google Font Directory
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