Typepad 101: Adding Google Web Fonts

July 02, 2014

With a vast number fonts available for design, Typepad keeps it simple by offering the most common fonts available to all systems and devices.  Did you know, though, that the range of fonts available can grow exponentially with services like TypeKit, MyFonts.com and Google Web Fonts  If you're a Pro Unlimited (or higher) user, you can use our tip below to easily customize your blog with a custom font(s).

Today we will focus on using Google Web Fonts as it is free and easy to use. In this example, we're using the default text that comes with the Block Party theme. 

Before DMP

Choosing Your Font

Let's change the font as it appears in our blog posts to "Merriweather". In the font listing, click the "Quick-use" button:

Screen Shot 2014-06-19 at 4.29.25 PM

Scroll down to Step 3 and copy the code given in the Standard tab:

<link href='http://fonts.googleapis.com/css?family=Merriweather' rel='stylesheet' type='text/css'>

This code is added to the Head Module in Typepad under Design > Head.   Next, we add our new font to our Custom CSS at Design > Custom CSS:

body { font-family: 'Merriweather', serif; }

Blog posts now have a new font!

After DMP

We also share these instructions in our Knowledge Base.

Blog Element Font Changes

Want to use a different type of font for other parts of your blog like Post Title or your Sidebar?  Follow the same steps starting with adding the Standard code to the Head Module (you can have more than one saved in this field), then include your new CSS additions.  For example, if you want the post title font to match your blog post, include this to Design > Custom CSS:

.entry-header,  .entry-header a { font-family: 'Merriweather', serif; }

If you can't find a font you like on Google Web Fonts, there are other sites like MyFonts.com and Fonts.com that offer a large selection of fonts for a fee. You must use their Webfont option in order to add the fonts directly to your blog, otherwise you're just downloading fonts to your device.

One Last Tip...

Now that you're able to add some font customizations, let us offer a word of caution: keep it simple.   Too many font types, styles, or sizes can make your blog look busy and distract readers from the content. Consider the style/type of fonts you like and how best to pair and use them. For example, a handwritten font looks best as titles and headers but may be difficult to read as the body of your posts and modules. We recommend looking for great pairing ideas online in places such as Pinterest or Google.

Have you added some custom fonts to your blog? Leave us a link in the comments so we can all check it out!

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.