Weekend Project: Getting Started with Google Web Fonts

This project is for subscribers at the Pro Unlimited level and above, since you'll be using the Custom CSS feature. Want to do this too? Find out how to upgrade to Unlimited!

One bit of feedback that we hear a lot is that there isn't enough variety in the fonts available in the Compose editor and blog themes. There's a technical reason behind this - if you use a special font on your blog that your readers don't have installed on their computers, they won't be able to see it.

That's a bummer, right? Luckily, services like TypeKit and Google Web Fonts can help you bring more exciting fonts to your blog. We have instructions for getting started with TypeKit in our Knowledge Base and this project will get you started with using Google Web Fonts.

The first step is to head over to the Google Web Fonts site and take a look at the fonts they have for use. There are nearly 400 available so you'll be there a while. Don't say we didn't warn you!

As a general rule of thumb, handwriting and novelty fonts should be used just for accents - banner and navigation bar text, date headers, post titles, etc. Simpler fonts, like those along the lines of Arial or TImes New Roman, can be used for blocks of text like your post content.

Google has a nice preview feature that will allow you to see what a font will look like in a paragraph. See how much more legible the sans serif font on the left is than the script font on the right? The script font would be lovely for banner text but doesn't work so well for post content.

 

 

With that in mind, Google has lots to choose from, so you're sure to find something that will work great. When you've found a font you want to use, click on Quick-use:

 

 

On the new page, scroll down a bit to the blue box and click on @import.

 

 

Copy the @import code and click to Blogs > Design > Head, then paste the code into the Head module area. It should be wrapped in <style> </style> tags, so the final code you add to the module should look like:

<style type="text/css">
@import url(http://fonts.googleapis.com/css?family=Armata);
</style>

You can also paste the @import code into the Advanced section of your Navigation Bar module at Blogs > Design > Content, if you'd prefer.

To keep things really simple, you can set the font for the body tag in the Custom CSS screen, at Design > Custom CSS, and that will apply the font to all of the text on the page. Google shows you how the CSS will look under step 4:

 

 

Here's how the Custom CSS will look inside Typepad when you combine the font-family with your own body selector:

body { font-family: 'Armata', sans-serif; }

Isn't that easy?

The next steps are more advanced - customizing specific areas with different fonts, rather than just setting one font for everything. It's important to keep in mind that each new font you add will increase the overall load time of your blog. It won't be a lot but it is something to be mindful of while designing your blog.

For the purposes of this project, we're going to keep things pretty simple and start with our new Clean theme. But really, this will work with any theme since we're overriding the default fonts with CSS.

We're going to use the Spicy Rice font for the banner header text, so you would add the @import to the Advanced section of the Navigation Bar module, then add the CSS for the banner header to the Custom CSS screen, like so:

#banner-header { font-family: 'Spicy Rice', cursive; }

You can add additional CSS to make the font a specific size or color, center it, etc. Here's an example:

 #banner { height: 120px; }

#banner-header {
font-family: 'Spicy Rice', cursive;
font-size: 34px;
text-align: center;
}

#banner a { letter-spacing: -1px; }

Here's how all of that will look in Custom CSS:

 

 

And here's how it looks on a live blog:

 

 

Pretty easy, right? Let's take it another step and use a web font called Josefin Slab for our blog's headers. The CSS looks like:

 .entry-header, .module-header, .comments-header, .comments-open-header, .archive-header { font-family: 'Josefin Slab', serif; font-weight: bold; font-size: 130%; }

You can use a web font for TypeList and post content as well. We'll use a font called Abel and apply that to the rest of the page text like this:

.date-header, .entry-content, .entry-footer, .comment-content, .comment-footer, .module-content, .archive ul, .nav-list-item a, .footer-list-item a, p { font-family: 'Abel', sans-serif; }

The final p tag takes care of general paragraph text that you might need to style. Here's how all of the Custom CSS will look in TypePad:

 

 

And here it is all together on a blog:

 

 

If there's a specific piece of text that you'd like to customize, just view the HTML source of your blog in your browser and look for the class preceding the text. Here's an example using the text for the comment feed:

 

 

The CSS would look something like:

.comments-info {
font-family: 'Josefin Slab', serif;
font-weight: bold;
font-size: 130%;
}

Depending on your knowledge of CSS, you can customize your blog as much as you want using web fonts. Try not to get too carried away, though. Too many different fonts on one page can be distracting!

We'd love to see Google Web Fonts in action on your blog! If you're using them, leave us a link in the comments!

Comments

[Account Deleted]

I've been using Google Web Fonts for a while now on several sites related to the school, and yep they are easy to use and apply in both advanced templates and also themes;

http://www.porchester.notts.sch.uk/citadel - an iPad project that uses a nice font to match the project
http://www.porchester.notts.sch.uk/140words/ - this site uses a child friendly font

However, the best use I've found for using a Google webFont is on the mobile versions of our sites. It has made it much easier to read content when using an iPhone;

http://www.porchester.notts.sch.uk/.m/website/ - the main school website
http://www.porchester.notts.sch.uk/.m/tanzania/ - our link to our African partner school
http://www.porchester.notts.sch.uk/.m/140words/ - the mobile version of our 140words project

(of course, viewing these on a computer will make the text appear too large, and the formatting will not be the width of a mobile display)

[Roger Sharp]

One issue with Google web fonts: when someone clicks through to your blog from a link on Facebook on an iPhone it all goes to hell in a hand basket. Not a problem on the iPad as that launches Safari... Anyone else experiencing this? I'm using the new Clean theme with default Google Web Font..