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.
. Even though I am only four chapters in (yes, I am a slow reader; it's because I only read before bed time), I am absolutely loving this book! If you haven't already read it, I highly recommend that you do!