Weekend Project: Getting Started with Google Web Fonts

December 30, 2011

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.

 

Paragraph preview

 

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:

 

Armata quick-use

 

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

 

Armata-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:

 

Step4

 

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:

 

Banner custom CSS

 

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

 

Banner-published

 

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:

 

All CSS

 

And here it is all together on a blog:

 

All CSS

 

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:

 

Comments-info

 

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 powered by Disqus

Welcome

Need help?

Follow us!

Typepad on FacebookTypepad on TwitterTypepad on Google+Typepad on PinterestSubscribe to Everything Typepad

Like us!

Typepad Newsletter

Still having trouble? Contact Support.