Saturday, March 26, 2011

How To Use Google Custom Fonts On Blogger?


I'm sure many blogspot users will be fed up with old simple fonts. Especially, web designers and web masters were completely stuck with the default fonts. But, we have got a solution to this problem. Google has launched a service called Google Web Fonts. It's completely free to use for both commercial and private purpose. Go check out their directory and grab the font of your style.

Once you have chosen your font style. Just make sure you back up your template. Login to your dashboard. Navigate to "Layout>>Edit HTML" from your dashboard. Hit the download template button and your done. Now, follow these steps.

1. Just click on the font of your choice from the Google Font Directory. Later, hit the tab that says "Use This Font" and you will find a code something like the one shown below.
<link href='http://fonts.googleapis.com/css?family=Dancing+Script' rel='stylesheet' type='text/css'>
(Note: I have chosen Dancing Script as the font. The coding may vary depending upon the font you choose)
2. Copy and paste the code just below the following line.
<head>
(Note: You need to add a forward slash - / at the end of the coding on step 1.  Only then, you can save your template.)
3. That's it. Save your template. You have added the font on your blog. To make them really working, you need to specify it in the CSS as follows.
3.1. If you wish to have the fonts displayed for your POST TITLES, then declare them as follows.
.post-title {font-family: 'YOUR FONT NAME';
}
3.2. If you wish to have them displayed on the body section of your posts, then you need to edit your CSS for post body as follows.
.post-body {font-family: 'YOUR FONT NAME';
}
(Note: Replace YOUR FONT NAME with the font name you have chosen. In my case, it is Dancing Script. You have to remove the previous font style that existed on your template.)
4. Save your template and see your fonts in action!!!

The coding may vary depending upon the template. If you have some unique custom templates, then I'm sure the coding will be different. So, don't worry. You can contact me via email or leave a comment below and I will help you with the customization. Don't forget to share your views about this post. See you soon in another interesting blogger hack.

Related Posts by categories



Related Posts Plugin for WordPress, Blogger...
Twitter Delicious Facebook Digg Stumbleupon Favorites More

 
Join Bloggerative on Facebook Follow Bloggerative on Twitter Subscribe to RSS Contact Bloggerative
Sponsored by iPhoneMY