Typepad 101: Applying Custom Font To Sidebar Headings

Welcome to Typepad 101! Whether you want to add some new features to your blog's design, or simply make your blog more functional, Typepad 101 has you covered. The tip below requires the use of the Custom CSS and Head Module features which are available with the Unlimited plan. You can upgrade anytime if you aren't already at the Unlimited level.

In your sidebar, you can add a variety of content - blogrolls, widgets, category lists, etc. - using the default modules, Typelists, and custom modules. By applying a unique, custom font to the module headings, you can add a bit of style to the blog sidebars.

First, we'll need to find a good font. With headers, you can choose a fancier font than you would for your blog posts, but still make sure to choose a font which is easy to read.

Google Web Fonts has a vast library of fonts to choose from and it's free. Go to http://www.google.com/fonts and find the font you wish to use and click the "Quick-use" button.

We recommend keeping the defaults and scrolling down to step 3: Add this code to your website.

In the Standard box, you'll want to copy the code which will then be added to the Head Module for your blog. In this example, we've chosen the Oswald font, and the code needed is:

<link href='http://fonts.googleapis.com/css?family=Oswald:700,400,300' rel='stylesheet' type='text/css'>

In Typepad, go to Design > Head, enter the code in the text field, and click Save Changes. If you have any other code in the module, you can place the new code at the end.

Next, we'll want to go to step 4. Integrate the fonts into your CSS at Google Fonts and copy the code.

font-family: 'Oswald', sans-serif;

Now, we want to apply the font to the sidebar module headers which uses the .module-header class. Some module headers, including Archives and Categories, are links, and we'll also need to use the class .module-header a where the "a" indicates it is a link. The resulting CSS is:

.module-header, .module-header a { font-family: 'Oswald', sans-serif; }

In Typepad, go to Design > Custom CSS, enter the above code in the text field, and click Save Changes. If you have other CSS in the text field, you can place the new code at the end.

BEFORE

AFTER

Instead of changing the font, are you looking to add images to your sidebar module headers? If so, we have you covered in a previous tutorial.

Similar steps can be used to apply Google Web Fonts to other elements of your blog's design. Check out the article on using Google Web Fonts for more information.

Share with us the links to your blog where you have used this tip in the comments! Need help applying a third-party font to another area of your design? Ask the community in the Typepad forum.