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!

Typepad On Pinterest: Inkredible Stamping

June 27, 2014

Did you know Typepad is on Pinterest? It's true! We love pinning and repinning great content from Typepad blogs in every genre, and we're always looking for great, inspirational content. Are you on Pinterest? Drop your link in the comments, and don't forget to follow Typepad right here! If you're not on Pinterest yet, check it out - it's a great way to promote your blog and connect with others!

Want some inspiration? Check out our featured pinner, Inkcredible Stamping!

Julie is a Papercrafter, Scrapbooker, and Teacher of all things Creative.  She teaches how craft activities like scrapbooking and rubber stamping can help relieve stress, enjoy personal time, and discover a new passion.

Pinterest

FOLLOW: Blog | Pinterest

Want to promote your pinterest account on your Typepad blog? Just go to Blogs > Content and add the Pinterest Widget to your Sidebar via the center menu. While you're there, make your blog posts "pinable" by adding the Pin It button to your post footers.

Want even more? Learn how to promote your blog on Pinterest and follow Typepad at www.pinterest.com/typepad.

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.