[I originally wrote this post several months ago as a contributor on Somewhat Simple]
Today I want to show you How To Use Google Web Fonts in Blogger. If you haven’t ever checked out Google Web Fonts you need to! Google offers 500+ fonts that are available for web safe use. What does this mean? That you don’t have choose from the 20 font options Blogger offers in the Template Designer. There are hundreds of FREE web safe options available to you! All you had to do is add a few snippets of HTML code to your blog. Let me show you how ….
1. Go to Google Web Fonts and choose which font you would like to use on your blog. Some of my favorites are Josefin Slab, Amatic SC, and Raleway Thin. Have fun! There are hundreds of options! Once you have chosen the font you would like to use click “Quick Useâ€.
2. Scroll down and look for the code in the blue box. Copy it.
Here is the code for the font I choose.
<link href=’http://fonts.googleapis.com/css?family=Josefin+Sans’ rel=’stylesheet’ type=’text/css’>
4. Login to your Blogger Dashboard > Template > Edit HTML.
3. Click Proceed.
4. Click CRTL F (PC) or COMMAND F (MAC). Find the code <head> and paste the code from the Google Web Fonts site directly below that.
5. ADD </link> directly after your Google Web Font code. It should look like this >>>
6. Now click CRTL F (pc) or COMMAND F (Mac). Search for the code ]]></b:skin> right ABOVE that is where you will place the code to tell Blogger which page element you would like to be in your new font. So if I wanted my post titles to be my new font (Josefin Slab) I would paste the following . (Make sure you replace ‘Josefin Slab’ with your font name.)
.post-title {font-family: ‘Josefin Slab’ ; }
if I wanted my blog content (post body) to be my customized font then I would paste (again, replace with your font name)
.post-body {font-family: ‘Josefin Slab’; }
Here is a screen shot of what my HTML looks like >>>
7. Final step – press preview. If you like what you see, SAVE!
This tutorial is based on the Blogger Simple Template. If you have a custom template your coding will vary slightly. If you have questions leave links to your blog in the comments and I will try to point you in the right direction.
awww man oh man oh man! you just opened up a whole new world of fun for me! thank you sooooo much :)
hello there, i followed your instructions very carefully but it doesnt work for me.
i used the font Fredoka One.
thanks :)
If helps, Mind the “/” at the end of the link tag because google web fonts doesn’t generate it.
It also may not work, try to convert this font code in special characters. Paste it there
http://web.forret.com/tools/html.asp and use generated one.
Hello, I just followed all your wonderful instructions but it didn’t work :( Any help?
Hey Kendra! I appreciate this tutorial. Unfortunately, I cannot figure it out!! I don’t know if it has to do with broken HTML or what’s going on. But I was wondering if you could take a look. I did the steps exactly so i’m not sure what could be going on.
my site is: weandserendipity.com
let me know! thanks so much!
Hi Kendra
I want to add All types of fonts which I want to use in my Blog can you tell me How can I add into my Blog ? guestposter110@gmail.com send me mail on this with description I’d love to recieve
Brilliant tutorial, however I follow your instructions exactly, but it says I need to add in an ending and it tells me to add it instead of , but when I do it still says its wrong. Any ideas?
Thanks
Yes, you might have to add in a tag at the end. Sometimes blogger is a little crazy :) Let me know if you get it to work!
Thank you.
Dint work for me.. plz help
Congrts! Awesome article. Its very useful. Am waiting for your next post…
http://www.meogle.org/2013/11/add-google-web-fonts-blogger-wordpress.html
Its my article on this same topic.
Thank you so much! I have been working on changing the font on my blog all week and your website is the one that finally made it “click†for me!!How to Use Google Web Fonts in Blogger Blogs
I’m so glad!! :)
Make sure you add at the end of the code you pasted. Sometimes blogger is funny and you will have to add it again.
Try that and let me know if it works!
This is AWESOME! COMPLETE and WELL expressed in terms of the step by step process of using it. Thanks for this a lot!
Thanks. It worked beautifully.
Hi, I loved the tutorial but it also didn’t work for me. Could it be that I’m using “Dynamic Views” template. I’m so frustrated. I’ve tried 4-5 DIFFERENT tutorials with yours being the easiest and best but I cannot get it to work. I tried the “Courgette” font type for the body. Please help!
Hi! I’m sorry that it didn’t work for you!
Yes, It might be because you are using the dynamic views. The coding that you need to do may be slightly different. Also remember that you have to keep the code exactly like it was written. Make sure you don’t erase the ‘Quotation’ marks.
Great article.
Hi there! I’m at work surfing around your blog from my
new apple iphone! Just wanted to say I love reading your blog and look forward to all your posts!
Keep up the outstanding work!
Feel free to visit my webpage; A Coup Sur telecharger le film
I just want to say thank you for the hge help! I’ve been looking for this tutorial for a while. Thank you soooo much! God bless you and your family =)
You’re welcome! Glad I could help!
Thanks for finally wriing about >How to Use Google Web Fonts
in Blogger – Key Lime Digital Designs <Liked it!