Finding, Choosing & Installing Web Fonts on Your Blog

Choosing and Installing Webfonts via Blogging Basics 101

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:

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!

 

16 Responses

  1. Andrea Updyke August 21, 2013 / 11:24 am

    I have been wrestling with coding my fonts for years (unsuccessfully) and I can’t wait to check out Google fonts. Yay! Thanks.

    • Melanie Nelson August 21, 2013 / 11:44 am

      Andrea,
      The Google Font plugin made things SO EASY. I didn’t find that until I’d tried coding and that took forever because I wanted to see how different fonts looked. That meant I had to install one, then install another one, etc. I wish I’d found that plugin sooner!

  2. Melanie @MelanieMedia August 21, 2013 / 11:27 am

    I like DaFont, too. They have a lot of fun fonts that I’ve used to make Pinterest graphics.

  3. duocmaca August 22, 2013 / 11:06 am

    i like app, i want process it.

  4. Miguel Shands August 22, 2013 / 3:54 pm

    Thanks for your advice melanie! Ive struggled to find some new fonts or a plugin that ACTUALLY works! Im gonna give google font a shot and hope it all turns out well!

    • Melanie Nelson August 22, 2013 / 7:32 pm

      Miguel,

      I’m the article was helpful! I really liked the Google Fonts plugin. Hope it works well for you!

  5. James Fawdon August 22, 2013 / 5:36 pm

    Hi Melanie, could I have your email please? I’m sorry to bother you but I have a facebook virus and need help.

    Thanks,
    James

  6. abhishek August 24, 2013 / 6:32 am

    verdena is my fav fonts………..
    really a help full article for me………………
    thanx nelson

  7. Scott August 28, 2013 / 1:08 pm

    Thanks, I couldn’t figure out how to get it working! Font works fine now!!

  8. Sameer Suri August 30, 2013 / 9:33 am

    Thank you so much for this, I wasn’t aware of the Google Fonts plugin before. I appreciate it much.

  9. Gerard saliot September 2, 2013 / 6:06 am

    most useful post found for this issue.. good work.. keep it up..

  10. Mitch September 5, 2013 / 12:36 am

    Hey Melanie,
    I loved hearing about Google fonts, it is a very helpful resource to have,
    but in my opinion people overdo the whole “selecting their right font” process, going for those weird fonts and effects where a simple “a” look more than a chinese word than a “a”, is too annoying and hard to read.
    I get it, it is cool if you are designing an art website , but when it comes to blogs, i think the font should be clear and neat and easy to read, basic standard fonts like “Arial” and “Tahoma” are best for Blogs.
    Many thanks and Best Wishes!

    • Melanie Nelson September 9, 2013 / 7:42 am

      Thanks for your comment, Mitch! I agree that simple fonts are best for many websites. I also believe font choice depends on several things: goals, tone, brand, audience, etc.

      Many bloggers (especially family, lifestyle, and coupon bloggers) have a much different audience and tone than a website aimed solely at presenting information or conveying industry updates.

Leave a Reply

Your email address will not be published. Required fields are marked *