Custom Web Fonts Tutorial / Tech Help For Bloggers Series

Looking for the party? : ) Hop over here for the giveaway.
----------------------------------------------------------------------------------------

Welcome to a BONUS installment of the Tech Help for Bloggers Series. This series is focused on providing technical tips and advice to help you understand and get the most out of your blogging experience. Here is the schedule of posts:

• July 1       Getting Started / Intro to HTML
• July 4       Sprucing Up Your Site Part 1 / Blog and social media buttons
• July 8       Sprucing Up Your Site Part 2 / Creating pages and navigation bars
• July 15     Getting to Know the Settings in Blogger / Your blog, behind the scenes
• July 22     Layouts and Templates in Blogger / How to change your blog's look
• July 26     CSS and Web Fonts / How to use custom fonts for your blog
• July 29     Organizing Events / Creating forms, polls, and sharable documents
• Aug 1       Hosting A Linky Party / Guest Post w/ Laura of TGIFF! and Quokka Quilts
• Aug 5       Pinterest and Flickr / Features for managing image sharing
• Aug 12     Giveaways / Technical tips and tricks for hosting a successful giveaway

Today we are looking more closely at CSS formatting and using custom web fonts. 

----------------------------------------------------------------------------------------------------------

Since the previous post in the series on Sunday was kind of a bunch of material to cover all at once, I wanted to take the opportunity to provide a little more information about what you can do with the "Add CSS" tool within the Blogger Template Designer. Today I am going to show you how to find, embed, and use custom fonts to augment the design of your blog.

I would also consider this tutorial to be more advanced than some of the other topics I've covered so far, so make sure to first read through the instructions carefully and as always, save a copy of your blog template before working with your template code.

Adding Custom Web Fonts

As we previously discussed, Blogger already has a long list of readily available fonts for you to choose from in the "Advanced" section of your Template Designer menus, but lets say you aren't really in love with any of these. Can you use a different font? In fact, you can!

Google has an entire website dedicated to providing access to many more web fonts that you can use to spruce up your blog or website. All you need to know in order to use these is the correct code, which Google also provides. Plus, it's a fun site to browse with a lot of great user tools to help make installing fonts much easier. Here's what the site interface looks like:

There is a list of demonstrated fonts here, each with several options to allow you to add them to your blog. Let's say you find just one font that you would really like to use. In this case you can simply select the "Quick-use" option, which will take you directly to a page that looks like this:

NOTE: If you are planning on using more than one font (I recommend no more than two or three), select "Add to Collection" which will effectively keep track of the fonts you are planning to use. When creating a collection, you can review the fonts together, make your final selections, and then click "Use" which will take you to the page below as well.

You'll notice that there is a Page Load meter in the upper right hand corner of this page. For a single font it's not especially important to pay attention to this, but if you choose to use more than one additional web font or more than a couple additional font styles (i.e. bold or condensed)  it becomes very important to make sure your meter stays in the "green" so that your page loading doesn't end up moving slower than a sloth. 

There are also boxes below this that allow you to sometimes add in differently languages such as Greek, Arabic, and so on. Only select the ones you need.

Finally at the bottom of the page there are two pieces of code that are very important to note. The first piece is what you will actually add to your blog template manually to embed the the web fonts into your website or blog. The second piece is the CSS coding, which you will copy and paste into the Add CSS tool to determine how your font formatting will look for each text element (post title, body text, etc...).

Let's begin by copying the first piece of code, the one that begins with <link href=.

We will be adding this one line of code manually to the blog template code, so open another browser tab and return to the Template menu within your Design menus. This time select Edit HTML. Just as a heads up, you'll want to be careful while interacting directly with your code here. As the note below states, make sure you know exactly what you want to edit within the code before beginning (i.e. read through the tutorial carefully before starting) and that you have backed up your template. Then click Proceed. 

You will then need to search for the  <head> tag within the code. It will be located near the top of the page. Directly below that tag, add in your copied code beginning with  <link href= (see below). 

This next step is very important. You may notice that the code you just pasted doesn't have a complete closing tag. In order for the code to be accepted, you will need to add a back slash just before the last bracket. It should then look like this />. Then click save template, but leave your template code open in this web browser tab (you'll need to reference it in the next steps) and open other tab.

In the new tab, open your Design menus again and access your Blogger Template Designer (through your Template menu and the Customize tab). Now we are going to enter the CSS coding into the Add CSS tool located within the Advanced menu. Open the Google Web Fonts browser tab and this time, copy the CSS code located in box #4. Then paste this code into your Add CSS tool.

Parts of CSS Rule

Courtesy of W3 Schools

You'll need to decide which text elements in your blog you would like to change. Then you will need to locate the selectors (similar to tags) of those elements within your code (in the other open browser tab) to complete the CSS coding. Some of your selectors will be easy to locate such as body (or something similar) for the body text of your page and h1, h2, and h3 for different sized header text, but since every template is a little different, you may need to do a little bit of hunting to find the right tags for the right elements.

I started by finding the CSS section in my blog template code. It is located just above the closing </head> tag. This is where some familiarity with reading HTML and CSS will be essential so that you know what you are looking for. I decided that I wanted to change the font of my post title, so I quickly scanned my code until I found the section where all of the CSS code written for Posts was located. The creator of my blog template code (the Simple Template by Josh Peterson) was kind enough to label each CSS section to make it easier to quickly locate. I then searched within that section for the selector that corresponded to my post titles, which happens to be h3.post-title. I copied the tag and pasted it into my Add CSS tool, just above where I copied and pasted the Google Web Fonts CSS code. A little editing was required to get the selector into the right place within the code (plus the correct brackets), so here is what the code should look like for this text element (also don't forget to add the semi-colon at the end of each declaration):

h3.post-title { font-family: 'Nixie One', cursive; }

I then went through these steps again to locate and add each text element that I wanted to change, adding a new piece of CSS code each time.

I hope this tutorial will get you started on using CSS to improve your blog. There are a myriad of ways you can use the Add CSS tool to make quick and easy changes to your blog template, with this being just one.