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

About 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.

Comments

  1. this is great. i was actually wondering about web safe fonts just this last week after I had a blog redesign and thought my title font didn’t fit at all. Thanks a ton Kendra!

    marissa
    rae gun ramblings

    1
  2. Thank you! Pinning this for later!

    2
  3. Thank you! Great tips… I can’t wait for your next post already :-)

    3
  4. 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 :)

    4
  5. Now this is really awesome, Kendra! Thanks.

    5
  6. 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.

    6
  7. 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?

    Thanks!!

    7
  8. I have followed everything, but there’s no change :(

    8
  9. Hi,
    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.
    Thanks,
    Georgia

    9

Trackbacks

  1. My Favorite Google Web Fonts says:

    [...] blogging design tip with you today! Remember a few months ago how I showed you a tutorial on How To Use Google Web Fonts in Blogger. Today I am going to share a few of my favorite Google Web Fonts to design with. There are hundred [...]

Add Your Comment

*


Hide me
Sign up and receive FREE printables and fun ideas right to your inbox!
Email
Show me
Build an optin email list in WordPress [Free Software]