Saturday, February 2, 2013

For Bloggers // Adding Google Web Fonts to your Blog.

The appearance of your blog is so important. It's not just about color scheme and having visually appealing images, its also about typography. Choosing the right type of font to use on your blog is more important than you may actually think.

I am personally a font junkie, I have hundreds, if not thousands of fonts installed on my computer. However, I think there is a time and place for those fun fonts. As fun as those fonts may be on our blogs, I don't think they always belong in our blog posts. 

Here is a fact... and I really hate to admit this because I feel horrible for saying it ... if I come across a blog with a bad design, color scheme and horrible fonts that aren't easy to read, 8 times out of 10 I don't take the time to stop and read their blog. Visual appeal,  for me, is essential! The same is true for websites; if its poorly designed and hard to read, it takes me one second to click away and never return. 

In an attempt to further improve my current blog design, I decided to play around with Google Web Fonts. Google Web Fonts makes it quick and easy for us bloggers to use hundreds of free, open-source fonts optimized for the web on our blogs. Not only can you embed these fonts into your blog's css code, but you can also download them to use on your computer. Sweet deal!

To help you get started and to make this process as simple as possible, I have included a few images and steps.

1. Head over to the Google Web Fonts website, here. Click "Start choosing fonts"


2. The interface is fairly self explanatory -- you can search for different fonts, filter by category (serif, sans serif, etc.), thickness, slant and width. Once you pick the font you want to use in your blog, click "Add to Collection" to add the font family you want to your collection. 


3. After adding you font to your collection, click the "Use" button. 


4. Follow google's instructions to embed your collection into your blog.

Copy the html code from "3. Add this code to your website" into the <head> of your HTML document. To access your blog's html, go into your blogger dashboard, click on "template," and "Edit HTML." I also like to expand the widgets when viewing my blog's html and css.

note: I know google doesn't tell you do do this, but make sure to insert a "/" backwards slash at the end of the html code that you insert into the <head> of your blog's html code -- see my example, below, in pink text. 


5. To integrate the new font in your blog, copy the css code in the second box. Depending on where you want to use this new font, you will have to search for the code of your desired element, and replace the current font-family with the new one. 

For example, I wanted to edit my post title font. To do this, I inspected my blog's elements (using firebug lite) and discovered that my post-title font used the class ".post-title" -- from there, I searched (ctrl + f) for the class in my css code. You will also notice that I added some other fancy stuff to my post-title. 

h3.post-title, .comments h4 {
  font: normal normal 18px 'Text Me One', sans-serif;
  font-weight: 500;
  margin: .75em 0 0;
  letter-spacing: 2px;
  text-transform:lowercase;
}

6. Once you are happy with the results, save your template's HTML code and voila!

What's your favorite google web font? Hopefully I haven't confused you too much! If you have any questions, please don't hesitate to ask. 

8 comments:

  1. Thanks for the tips! That is so true, your blog is beautifully designed, did you do it yourself?

    ReplyDelete
    Replies
    1. You're welcome, and thank you. Yes, I did design it myself!

      Delete
  2. Is it too soon in our bloggy relationship for me to say I love you? This is awesome! I have been wondering for SO long how to add some new fonts to the blog! Thank you so much for sharing!

    And don't feel bad, I'm the same way.. if the blog is... um... less than attractive, I don't go out of my way to spend a lot of time there. But luckily, for the most part, they all seem to look pretty great to me! :)

    ReplyDelete
    Replies
    1. Ha ha, no its not! And I am glad my tips can help you :)

      Delete
  3. Hi Chelsea! I found you through the Aloha Friday Blog Hop, and I'm so excited that I did. I need a tutorial for finding new fonts. My blog's fonts aren't that exciting. What would you recommend to go with its decor? Check it out and let me know what you think. I'm going to +1 this so I can save it for later. Thanks for the tips!

    http://penpaperpad.com

    ReplyDelete
    Replies
    1. Glad my tutorial can be of assistance. I would recommend a font that is easy to read and consistent throughout your blog - I am personally a fan of sans serif fonts! Good luck!

      Delete
  4. i didn't even know this was a thing! thank you so much for sharing. great tips!

    ReplyDelete
    Replies
    1. You're welcome! It's been around for awhile, but I only recently spent some time looking into it. I'm really glad I did because it opens a few new doors for possibilities!

      Delete