|
|
|
I'm sure many users are fed up with old simple fonts. Especially, web designers and web masters are 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.
Click here to subscribe to FREE email updates from "Everything About Blogging", so that you do not miss out anything that can be valuable to you and your blog!
Hi mukund
REPLYThis website is very informative for the bloggers. Thanx.
I have a blogspot blogger. I use Third party template.Below Header I have Home. I want About, Contact options near the Home in horizontal line. How to edit it??
thanks.
@Anonymous: Thanks for your comment! I'm glad to know that you find my blog very informative. Yes! That's easy! Just contact me via email and I will help you!!!
REPLY@Anonymous hai iam tried this, but it not work for my blog, i have tried to add a font Tinos for my posts ,but it not working. help me. this is my blog.www.stocksindialive.blogspot.com
REPLY@rajkumar: It will work and it should work. I have tried it on many of my sample blogs and it is working. Contact me via email regarding this problem! I will solve it for you!
REPLYHi there! I followed your advice and did a step by step installation of google font on my blog (www.thequeenfather.com). However, upon saving the template this message comes up:
REPLYThe value of attribute "type" associated with an element type "null" must not contain the character '<'.
Any idea why this happens and how I can work around this? Please I need help!
Marco
(you can email me if you wish thequeenfather@me.com)
Many many thanks!
How would you go about doing this when using a template made in artisteer?
REPLYThank you for the tutorial. Is it possible to use the google fonts and just add them to one blog post and not all of them using the css?
REPLY@Joyful Girl - Gypsy Heart: Well, yes! That's possible! You may have to manually add the css tag to the post using the edit html mode. I hope you understood what I meant. If not, email me and I'll help you out!
REPLYThank you so much for the post.
REPLYRead 2-3 articles to use custom fonts for my blog but ended up unsuccessful.
After reading this post I solved the problem. Cheers.
Thanks.
Kathrine
Use the tab below to comment. No spam please!!!
POST YOUR COMMENT