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 paste that into Blogs > Design > Custom CSS.
To keep things really simple, you can set the font for the body tag in 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:
@import url(http://fonts.googleapis.com/css?family=Armata);
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, like so:
@import url(http://fonts.googleapis.com/css?family=Spicy+Rice);
#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:
@import url(http://fonts.googleapis.com/css?family=Spicy+Rice);
#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:
@import url(http://fonts.googleapis.com/css?family=Josefin+Slab);.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:
@import url(http://fonts.googleapis.com/css?family=Abel);.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!
