Google Web Fonts, similar to Typekit, allows you to apply additional fonts to various elements of your blog's design.
If you are using the Responsive Design Lab, you can select Google Web Fonts at Design > Style. The steps below only apply to pre-made themes and designs created with the Theme Builder. Learn more.
Please note Google Web Fonts and Typekit allow you to apply one or more fonts to text elements in your blog's design, like post titles or sidebar module headers. The third-party tools will not give you more options in the Font Family menu when composing your posts.
First, go to the Google Web Fonts site and browse through the fonts available.
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.
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 Standard.
Copy the Standard code and paste that into the text field at Design > Head Module and click Save Changes.
To simply apply the font your entire blog, 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; }
The next example is more advanced and demonstrates how to customize specific areas with different fonts, rather than just setting one font for everything. Keep in mind that each new font you add will increase the overall load time of your blog.
For this example, the fonts will be applied to a blog using the Clean Theme, but you can 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:
Another web font called Josefin Slab can be added to the 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. The CSS for applying Abel to the rest of the page text is:
.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 applies the font to general paragraph text.
If there's a specific piece of text that you'd like to customize, 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%;
}
Not finding the font you want to use with Google Web Fonts? Check out Typekit or Cloud.typography for other options.