A Quick and Dirty Guide to Font Selection for WordPress

Typography

Building a WordPress site can be really fun.

After all, it’s your chance to start from scratch. From selecting a theme to developing content, a lot of care and consideration goes into launching a new blog, so it makes sense you’d pay equal measure to the font selection process.

With the above in mind, let’s spend some time going over the rules of the web when it comes to selecting fonts — even if you’re a web design beginner — and how to implement them once you’ve made your picks.

What Fonts Are Best for the Web?

Back in the day, you were limited to just a handful of fonts when designing for the web. For the sake of usability across numerous browsers and the often clunky transitions between them, you were stuck using good old standbys like Times New Roman, Arial, and Helvetica.

While there’s still nothing wrong with using these fonts, you do have a little bit more leeway nowadays thanks to CSS and Google Fonts.

To get started selecting the right font for your blog, you need to know a few things. According to Smashing Magazine, there are 5 basic groups of typefaces you need to know about. They include:

  1. Geometric Sans: These fonts are minimalistic and modern. They are geometric and feature strokes with the same width. Popular examples include Helvetica, Futura, and Gotham.
  2. Humanist Sans: These faces retain something of handwriting in their makeup, even if they’re very clean and structured. Stroke weights vary and offer a more personal touch. Examples include Myriad and Verdana.
  3. Old Style: Based on calligraphic style writing, these are the oldest of all the typefaces, have little to no variation between thick and thin lines, and have consistent kerning–the spacing between letters. The best example is Garamond.
  4. Transitional and Modern: To wax historical for a moment, transitional and subsequent modern fonts were born out of a desire to move away from the Old Style look. These fonts are best described as geometric and sharp and are characterized by bold contrasts between thick and thin strokes. Examples include Times New Roman and Baskerville.
  5. Slab Serif: These fonts are a bit of an anomaly and feature even strokes with very bulky serifs — the feet at the bottom of letters. Examples include Courier and Archer.

For further reading on typography, check out more in depth typeface classifications at Typedia.

Rules of Font Usage

 

Many WordPress themes come with fonts pre-installed. Many people choose to just keep them and ignore this element of customization altogether.

That’s perfectly fine if you like them well enough, but what if the preset fonts don’t suit the subject matter of your blog? If you’re building a very corporate, all-business blog, a loopy, script font is probably not going to cut it. The same can be said of a more informal blog — a very rigid, in your face typeface like Baskerville is going to be off-putting.

I hate to fall into “How does this font make you feel?” territory, but design decisions are often more creative than technical. How a font makes you feel is actually a very big part of whether or not you should use it.

But you likely need more direction than that, so here are a few do’s and don’ts for picking fonts:

Of course, these are just guidelines, and as the saying goes, rules are meant to be broken. Just make sure you understand the rules before you set your heart on ignoring them!

Integrating Fonts Into WordPress

Google Font Open Sans

Remember before how I said the Internet used to be really limited in terms of which fonts would appear in what browser resulting in more often than not clunky designs that defaulted to Times New Roman? Yeah, we were a primitive lot back then.

But thanks to webfonts (and some substantial getting it together on the browser front), the Internet is now a typography nerd’s field day. And wouldn’t you know it, you can pull fonts straight from Google Fonts into your theme?

To do that, head over to Google Fonts and have some fun looking around. You have plenty to choose from but try to keep the guidelines discussed above in mind as you browse. Click Add to Collection next to each font you want to use. Then click Review to go over your selections and decide which ones will make the final cut. Finally, click Use. Make any final options selections and scroll down to the bottom where it says Add this code to your website.

You’re going to copy this code under the Standard tab then paste it into your main theme file. So, first thing’s first: back up your website. Don’t worry. I’ll wait. 🙂

Once you’re done with that, go to Appearance > Themes > Editor > Header.php from your WordPress dashboard (a better alternative is to use your FTP client to edit this file).

Paste the code at the top of the file, as early as possible. WPBeginner has a great tutorial on how this should be done.

Once you’re finished, save the page (or re-upload it via FTP). Then all you need to do is implement the font(s) you’ve selected in CSS.

While still in the Editor, open the main stylesheet (usually called style.css or something similar) and look for the part of the code that looks similar to the following:

body {
     color: #777777;
     font-size: 14px;
     font-family: Helvetica, Arial, sans-serif;
     line-height: 1.6;
}

See where it lists a couple of different fonts? That’s where you’d plug in your new font selections. Let’s say you’ve selected Open Sans from Google Fonts and that’s what you’ve linked to in your Header.php file. You would edit your CSS file to look like this:

body {
     color: #777777;
     font-size: 14px;
     font-family:'Open Sans', Helvetica, Arial, sans-serif; 
     line-height: 1.6; 
}

Go through your CSS file and look for all the spots where you’d like your new font to appear. Then, just call it out by name as in the example above. Keep whatever standard fonts were listed just in case something goes awry so your visitors will have an experience that’s at least approximate to what you intended.

You can select different fonts for headers and body text. Just make sure to link them properly in your header.php before you utilize them in CSS.

Conclusion

That’s really all there is to it. Webfonts have made typography on the Internet a thing to be proud of. And the best thing about it is you don’t need to be a design expert to do it right.

What is your favorite font and/or font combination? Do you use Google fonts? Share your thoughts on web typography with us in the comments section below!

Photo Credits: Relly Annett-Baker, Josh Self

Tom Ewer

Tom Ewer is the founder of WordCandy.co. He has been a huge fan of WordPress since he first laid eyes on it, and has been writing educational and informative content for WordPress users since 2011. When he's not working, you're likely to find him outdoors somewhere – as far away from a screen as possible!

13 Comments

  1. Lina

    When selecting fonts for a web, I often choose two or three fonts which belong to a family, such as Roboto Regular and Roboto Black. Sometimes it sounds boring. Should I mix serif and sans-serif of one font?

  2. Deepesh pandole

    that it’s 16 px, not 16 pt. Pixels and points are quite different please replay

  3. Niels Jørgensen

    This was super helpful, thanks! I’m still deciding on fonts and this gave me some good inspiration.

  4. Grey

    Just a tip:
    You used a Top 5 example above. When you use the different fonts in the alinea. The reader can faster take a action.

  5. Bigwas

    Times New Roman they say is the best font for a website and blogs. It is easy to read and does not strain the eyes.

  6. Bradley Charbonneau

    I put in links using HTML but your comment editor doesn’t like it, does it? Sorry about that!

    1. Tom Ewer

      Author

      Yeah, that makes it angry 😉

  7. 4mostip

    Assuming for the moment that the average WP user won’t know how to use child themes, one solid reason NOT to directly edit theme files like ) is that the next theme update will overwrite all the changes.

    I’m with Bradley on this.

    We need to segregate the different skills of design, programming and publishing-authorship – and enforce the division in the architecture of WP..

    The evolution of WP has progressed from a lamentable starting point for change management to reasonably effective solutions for authorship and for the programming of both core code and for plugins.

    We need equivalent change management protocols for design (themes, fonts, graphics) – child themes are but a rudimenary start along a long road….

    Steve

  8. Bradley Charbonneau

    Oops, my link got messed up. Could you fix it, please?

  9. Bradley Charbonneau

    I’ve been wanting a write-up like this to help my clients with font selection. Thanks, Tom!

    But it killed me when you get into editing the header.php file. Ouch! My clients are scared to edit any PHP files.

    There are some great themes (and theme frameworks) out there that have Google Fonts built right in. My favorite is Canvas from WOO Themes which lets you choose your Google Fonts from a simple drop-down menu, change the size, color, even thin or thick, right there in the admin. No code!

    I put together a video showing how easy it is: http://wpu.me/google-fonts/. Hope that’s helpful!

    Thanks again for the great post. I LOVE playing with fonts. It’s the fun stuff.

    1. Tony Jones (@HelmStone)

      Bradley – I’m with you I would prefer not to go into my PHP files and have found many places with Google Font support. I must get around to tweaking some of my own blogs!

      I thought the front of this post was excellent – informative, clear and to the point

      1. Tom Ewer

        Author

        Hi guys,

        Bradley: good tip on the Canvas support, although it doesn’t support the full complement of Google Fonts.

        If you’re averse to getting involved in PHP files then you should use a plugin such as http://wordpress.org/plugins/wp-google-fonts/

        Cheers,

        Tom

        1. Bradley Charbonneau

          Hey Tom,
          You’re right, it doesn’t support all Google Fonts out of the box, but someone has a plugin that gives you all fonts: http://wordpress.org/plugins/google-fonts-for-woo-framework/.

          Thanks for the tip on the Google fonts plugin. I’m happy to dig into some hearty PHP soup, but my clients can’t spell PHP … and don’t want to.

          BTW, I jumped on your PHP mention, but I didn’t compliment you on a great article about fonts! I especially like the advice (which most people don’t listen to): Don’t go overboard. 😉

Leave a Reply

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

Over 65,000 WordPress professionals are already using ManageWP

Add as many websites as you want for free, no credit card required. Sign up and start saving time!

Have questions? Get in touch!

Over 65,000 WordPress professionals are already using ManageWP

Add as many websites as you want for free, no credit card required. Sign up and start saving time!



Have questions? Get in touch!

Over 65,000 WordPress professionals are already using ManageWP

Add as many websites as you want for free, no credit card required. Sign up and start saving time!



Have questions? Get in touch!

Over 65,000 WordPress professionals are already using ManageWP

Add as many websites as you want for free, no credit card required. Sign up and start saving time!



Have questions? Get in touch!