Finding, Choosing & Installing Web Fonts on Your Blog

I’ve been fooling around with one of my other sites and decided I need a new font to freshen up the place. And then I remembered that I kind suck at design. Because of that deficiency, Times New Roman has always been my go-to for everything. Not willing to give up, I asked around and found out where to look for web fonts and then I spent the rest of my life scrolling through so many fonts my eyes glazed over. The end.

Actually, I did finally settle on some fonts and I’m finishing up the tweaks on that other site. After I found the fonts of my dreams, I realized I could save you the trouble of asking around and searching high and low. This post is chock full of links to help you find, choose, and install web fonts on your own blog.

TIP: As you’re looking at web fonts, remember that not all browsers can read specialized fonts (though most can these days). It’s safest to have a backup font specified in your style.css file.

Finding a Font

Ya gotta find ’em before you can choose ’em and install ’em, right? And there are several places to find ’em.

• Looking for a font that works across the board? Google Fonts is your safest bet for finding a font that will work on all browsers.
• Font Squirrel has many free fonts you can dowload, then FTP to your server.
• Got a font you love but you don’t know what it’s called? No problem. What the Font by My Fonts can help you with that.
• Fontspring is another great resource. Most of the fonts are paid, but there are some free ones in there too.
• FontDeck looks interesting. You can browse and test fonts on your site for free, then when you choose a font it will cost you around $7.50/year to use it. (But prices do vary.)
• Typekit is a paid site (starting at $25/year — not bad), but you can try a membership free for 30 days.

Choosing a Font

The hardest thing about choosing a new font for your blog is finding the right combination! Most of the advice I found suggests using complementary fonts — one for headers and one for paragraph or body text. My Blogging Tips Pinterst board has some great links to font combinations that work well together. Here are few links for you:

• A Beginner’s Guide to Pairing Fonts. This one gets into the real design aspects of fonts, but does it in an accessible way. Design isn’t my forte, but I found this article to be extremely helpful.
• 10 Great Google WebFont Combinations For Your Next Project. I loved this article because it shows the combinations with headers and paragraph text so you can see how the fonts compliment each other. Bonus: Monkee-Boy offers some project options that would work well with each font.
• Fonts.com not only offers many fonts, but they have a repository of helpful articles and tips as well.

Installing a Font

Now that you have the font you want, you need to install it. This is where I can kind of hear the groans and protestations of, “I can’t code!” Don’t worry. I gotcha covered.

For those of you who want the easiest route possible and are happy using Google Fonts, you can just install the Google Fonts plugin. This is the easiest way to install a Google Font. Once the plugin is installed, you go to settings and use the pull-down menus to choose the font(s) you want and what attributes (e.g., headings, body text, lists, etc.) you want to assign to the font. It’s a great way to see how different fonts look on your blog. If you don’t like the font, just choose a different one from the menu!

But what if you have a font that’s not a Google Font? Or what if you just want to learn how to install a font directly in your CSS? No problem. I’ve got a few resources for you:

• Zoe Rooney’s article, Installing Web Fonts, Start to Finish!, explains what you need to know about installing any kind of font, not just Google Fonts. You’ll need to know how to FTP.
• How to Use Google Webfonts in Your WordPress Stylesheet. Erica shows you very quickly how to install Google Web fonts. Kershnick kershnack, done.
• How To Install Google Fonts the “Right Way” Thinking you really want to get into the code and learn it? It’s easier than you think, but you’ll need some guidance. That’s where WPBeginner comes in. They’ll show you how to install your fonts in a way that’s “optimized for performance.”

Now, go forth and make the Web a more beautiful place! Want to know even more about blog design? Check out Blog Design For Dummies by Melissa Arce Culbertson. It’s a great resource. And you can easily find great images for your blog if you know where to look — and I wrote a resource post to help you!