How to Use Google Web Fonts in Blogger

Hey there! I am so excited to be writing my first post here on Somewhat Simple! I am the new Blogging Tips & Tricks contributor and I can’t wait to share blogging tutorials with you! Because this is my first post I want to introduce myself a little. My name is Kendra and you can find me at Key Lime Digital Designs. I am a momma, wife, and graphic designer. We currently live in Hawaii and our loving the adventure.  I love to bake, read, shop, and of course blog! If you have any questions for me or tutorial requests feel free to leave them in the comment box below!

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=’’ 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.

Todays Post

Todays Post

This post was written by a guest on Somewhat Simple. If you have any questions regarding the content of this post, please contact the author directly.
Todays Post

Latest posts by Todays Post (see all)



  1. Stacey says

    This is a great tutorial! It all seems super easy – but unfortunately I couldn’t make it work :( I will keep trying, though! I don’t know what I did wrong but everything stayed exactly the same! I figured adding anything/changing things to the html would change something, but I guess that’s not true. Haha that shows just how much I know about html :)

  2. says

    This is so cool! I knew Google had web fonts from using Google docs but I had no idea you could use them other places too. Thanks for posting this. Now I’m off to tinker with my blog.

  3. says

    Thank you! I used google web fonts for both post titles and for post content, however when I go to the actual post page, the post titles switch back to the old font, while the body font is correct. How do I correct this?


  4. Georgia says

    I have followed your instructions very carefully (and many other but your tutorial is the easiest to follow!). However, I’ve made changes and when I preview the template, nothing seems to change it just stays the same!
    If you could help me then that would be great.