Jazz Up Your Website’s Fonts in a Few Easy-Breezy Steps

by Annie

in easy breezy website work

Abstract image of variety of fonts and woman's face in profile

Imagine the fontastic possibilities... OK, that was bad. - Image credit: vassiliki koutsothanasi

I love it when I find out really useful information from cool peeps.

One of my favorite sites — and really the go-to site for the most practical and usable tips on design for websites and paper marketing goods — is The Big Brand System. Pamela Wilson knows her stuff, big time. A recent post of hers on color and font combinations that work and play nicely together caught my eye, and inspired this post, which is all about easy upgrades to your website’s fonts.

See, it used to be that all a girl (or guy) could do to dress up a business website was add some images, pick a few colors .. but if you wanted cool fonts? Well, you were SOL, amigo, because you were limited to just a handful of “web safe” font families.

Which was all well and good if you happened to luuuurve Times New Roman or Tahoma. But if you wanted something snazzier, and weren’t some coding genius, the best you could do was cobble together a header in Photoshop and upload it as an image.

But now — hold the phone, there, skippy! We got ourselves some OPTIONS! Google came along with Open Fonts. A veritable smorgasbord of typographic delights, Google Fonts opens up a whole slew of font possibilities.

And the best part of all? Thanks to a few enterprising geniuses, you don’t have to know jack about CSS to implement them on your underdressed WordPress site.

Ready? Here’s how you do it:

Step 1. Go to the Google Fonts page and browse to your heart’s content. Jot down the names of several contenders that you like.

Step 2. Now, head over to Font Combinator, a free web tool that lets you try those fonts out in combination.

According to the Wisdom of Pam, you want TWO fonts — one for content body text, one for headers and headlines.

Try out your contenders on Font Combinator, playing with size and order, until you find the combo that makes you all warm and tingly inside.

Step 3. Log in to your WordPress dashboard and click Plugins. Search for “WP Google Fonts” and install that sucker.

Step 4. On your Settings menu click “Google Fonts” and then set up the combination you’ve picked.

Step 5. Save your settings.

Step 6. Check out your site. Analyze ALL your pages, hot shot — including a page with a few levels of headings, to make sure you’ve selected good sizes for each element.

Step 7. Adjust as necessary until you’re happy.

TIP: You can create a dummy page draft to check out all your elements, instead of coming up with something new, or tinkering with old content. Use the Lorem Ipsum Generator plugin to speed this task along. Just make sure to create H2, H3 and H4 tags, as well as formatted text like bulleted and numbered lists, bolded, italicized, and underlined text, so you can see how your choices look in all possible stylings.

That’s all there is to it! Happy tinkering — and be sure to tell us what font combinations you’ve tried and love (or hated) in the comments below!

Related Posts Plugin for WordPress, Blogger...

{ 4 comments… read them below or add one }

Pamela Wilson August 1, 2011 at 10:53 am

Annie, this is a super-useful summary of how to get custom fonts on your website. Thanks for spelling it out, and for your kind words, too.

Mind if I link to it in the future?


Annie August 1, 2011 at 2:23 pm

Are you kidding? I’d be honored, Sensei. 😉


Monika August 6, 2011 at 5:24 pm

Hi Annie, very interesting article and it certainly looked like a really good solution to the problem you discussed.

Having checked out Google Open Fonts however, we found that it is so full of security holes for WordPress sites that we certainly won’t be using them soon.

Google seems to be something like Microsoft, they bring out a program and expect the public to find the glitches and then may or may not fix them.

Thanks for the info anyway but to be safe (since hackers are busy everywhere!), I think we’ll stay with the boring fonts for now.


Annie August 7, 2011 at 10:29 am

Huh – interesting. I haven’t seen anything about security problems. You can bet I’ll go investigate myself. Thanks for the head’s up!


Leave a Comment

CommentLuv badge

Previous post:

Next post: