How to Find, Choose and Install Beautiful Fonts on Your WordPress Website (With Examples)

How to Find, Choose and Install Beautiful Fonts on Your WordPress Website (With Examples)

Your WordPress website could have the most beautiful design imaginable, but if the fonts you choose are difficult to read, nothing else really matters.

And while choosing certain fonts that bring a unique look to your text may seem like a great idea at first, it’s always best to think twice about how your choices impact readability – especially for people who prefer to scan web content.

Good looking fonts can enhance the look and feel of your site.
Good looking fonts can enhance the look and feel of your site.

Without appropriate fonts, the most essential component of your site – the storytelling – can get all out of whack, and visitors will quickly leave after getting frustrated with what they can’t read or understand.

If you want visitors to scroll down to read more, click on more links or pages, subscribe, or buy your product, you want to make it as easy as possible for them to do so.

In this article, we’re going to cover why font choice is important, where you can get fonts from and a few of our favorite typographical choices.

4 Simple Tips for Choosing Fonts for Your WordPress Website

Before diving into some of the most well-regarded WordPress-friendly font choices you can make, consider taking into account the following important tips:

1. Use Fonts That Reflect the Mood and Personality of Your Site

Ian Yates’ web design piece on Tuts+ serves as a good reminder that fonts have personalities, just like people. So, if your site is geared toward a young crowd and has a lot of humor pumped into it, you could probably get away with using quirkier looking fonts. On the other hand, if you’re trying to communicate your message from an authoritative standpoint, it might be a better idea to go with a more traditional font.

2. Use Combinations of Different Fonts (But Don’t Go Overboard)

Combining fonts is a great way to help distinguish different areas of your site, but using too many can easily confuse readers. You can use fonts that have an opposite look to one another, like a very thin font paired with a bold font, but avoid combinations that are too different and clash when put together. Alternatively, you can aim to choose fonts from the same family and experiment with using different styles and weights.

3. Choose Fonts That Maintain Their Look Across Different Screen Types

Not all fonts are guaranteed to look the same on every web browser, computer, smartphone or tablet, so consider having a look at your site’s content from as many different browsers or devices as possible. There are lots of free tools online that you can also use to test how fonts appear across different screens.

4. Favor More Commonplace Fonts Over ‘Trendier’ Ones

Spending an excessive amount of time playing around with fonts shouldn’t be all that necessary. If you find yourself trying out too many different types of fonts, none of which you feel you can settle on, then choose a font that doesn’t ever really get old. A lot of these will come with fuller weight sets that you can take advantage of as well.

Where to Find Fonts for Your WordPress Website

There’s a seemingly endless amount of fonts you can find all over the web, but a popular choice is Google Fonts. Hundreds of completely free fonts are available. The user experience is fantastic, offering a preview of all fonts available (with the option to change the placeholder text). And once you’re ready, Google will spit out the code you need to import the fonts for use within your WordPress theme (or alternatively, you can use the Easy Google Fonts plugin covered below).

If Google Fonts doesn’t quite live up to your expectations, there are other sites, like FontSquirrel, that allow you to download free fonts for use on your WordPress site. MyFonts is another place to look if you’re willing to pay for high quality fonts.

Google fonts are open source and free to use.
Google fonts are open source and free to use.

10 Top Google Fonts Explored

To keep things simple here and focus on just a very small handful of fonts embraced around the web, we’ve featured a selection of Google Fonts below. However, if you want to use fonts from anywhere else, there are lots of great plugins that will allow you to easily customize your fonts on your WordPress website.

  • Open Sans

    Open Sans is a humanist sans serif font. Featuring “an upright stress and open forms” (according to Google), it’s currently the most popular Google font available. It’s also one of the most versatile fonts you can choose, having been optimized for print, web, and mobile interfaces.

    If you’re looking to create a friendly and inviting feel on your site, you can’t really go wrong with this font.

    Suggested Pairings with Open Sans

    • Roboto
    • Oswald
    • Open Sans Condensed
    • Merriweather
    • Lato
    • Source Sans Pro
    • Raleway
    • Indie Flower
    • Montserrat
  • Roboto

    Feel like the text on your site could use a little extra curvy flare? Then maybe Roboto is the font for you. The font was designed to prevent rigidness in rhythm for distorted letterforms, rather allowing them to fit relaxed in their natural widths. Use it on your site to promote a natural reading rhythm.

    Suggested Pairings with Roboto:

    • Open Sans
    • Lato
    • Oswald
    • Source Sans Pro
    • Raleway
    • PT Sans
    • Open Sans Condensed
    • Roboto Condensed
    • Droid Sans
    • Roboto Slab
  • Lato

    Lato is a sans serif font that was originally designed as a corporate font set. Once the designer decided to go in a different direction and release it to the public, he wanted it to be “transparent” in the body text, yet maintain some of its original characteristics when increased in size. This sleek font gives off both a warm feeling from its use of semi-rounded details, plus a hint of seriousness given its strong structure.

    Suggested Pairings with Lato:

    • Open Sans
    • Oswald
    • Roboto
    • Indie Flower
    • Source Sans Pro
    • Gloria Hallelujah
    • Raleway
    • PT Sans
    • Montserrat
  • Oswald

    Oswald is a sans serif font that was inspired by and re-drawn from the original Alternate Gothic typeface. Why? To look better in a world now dominated by digital screens. It’s meant to be used on all browsers, desktop computers, laptops, and mobile devices. This font brings a classic, historic, and refined look to your site – largely differentiated by its tighter letter spacing than many other popular fonts out there.

    Suggested Pairings with Oswald:

    • Open Sans
    • Lato
    • Indie Flower
    • Roboto
    • Open Sans Condensed
    • Pacifico
    • Merriweather
    • Josefin Slab
    • Special Elite
    • Droid Sans
  • Slabo 27px

    Are you trying to sell something on your website? If so, consider using Slabo as your preferred font choice. It’s a size-specific collection (13px and 27px) that’s ideally used for online advertising purposes. Slabo 27px looks superb when paired with Oswald.

    Suggested Pairings with Slabo 27px:

    • Open Sans
    • Roboto
    • Lora
    • Lato
    • Open Sans Condensed
    • Oswald
    • Source Sans Pro
    • Gloria Hallelujah
    • Montserrat
    • Roboto Condensed
  • Lora

    When it comes to choosing an elegant looking font for body text, Lora is a great choice. It has a more memorable look than some, due to its brushed curves stemming from its calligraphic roots. It’s the perfect font for storytelling, or a site that aims to evoke an artsy feel. The curviness of this particular font really helps distinguish it from some of the others, providing just enough contrast from serifs.

    Suggested Pairings with Lora:

    • Open Sans
    • Roboto
    • Oswald
    • Lato
    • Lobster
    • PT Sans
    • Raleway
    • Arvo
    • Droid Sans
    • Source Sans Pro
  • Raleway

    If you really want to dive in to trying more fancy-looking fonts on your site, Raleway is one you should look at. This sans serif was intended to have one thin weight to it, and has since been expanded to include eight more. Because it’s a display face, it’s ideal to use in the larger sizes. Use it around sections of your site where you want to add a touch of elegance.

    Suggested Pairings with Raleway:

    • Open Sans
    • Lato
    • Roboto
    • Oswald
    • Droid Sans
    • Droid Serif
    • Lobster
    • Source Sans Pro
    • Montserrat
    • PT Sans
  • Josefin Slab

    For a geometric, Scandinavian font style that almost recreates a typewriter-ish look, there’s Josefin Slab. The designer put a lot of emphasis on the diacritics, and he admitted that’s where the sloped part of the letter “e” came from.

    It’s a font that’s also somewhat based off the Letter Gothic typeface. You might be surprised with just how many of the more creative and quirkier fonts you can pair this one with.

    Suggested Pairings with Josefin Slab:

    • Open Sans
    • Oswald
    • Merriweather
    • Pacifico
    • Special Elite
    • Amatic SC
    • Cabin Sketch
    • Open Sans Condensed
    • Allura
    • Fredericka the Great
  • Arvo

    Arvo is a little hard to explain in terms of the vibe it gives off, because it tends to be kind of mixed. It’s a geometric slab serif meant for both digital screens and print, with a “monolinearish” look, meaning it has both vertical and horizontal strokes of the same weight throughout.

    If you want to add a subtle tinge of contrast to the readability of your site content, this one might do. It’s also a preferred font for reading on Mac OS X.

    Suggested Pairings with Arvo:

    • Oswald
    • Lato
    • PT Sans
    • Droid Sans
    • Roboto
    • Lobster
    • Ubuntu
    • Raleway
    • Vollkorn
    • Open Sans
  • Merriweather

    Looking for something that’s just plain easy to read and isn’t Open Sans? Merriweather promotes a pleasant reading experience on digital screens while bringing a bit of style to your text, and features a mild diagonal stress, sturdy serifs and open forms. Choose this one when you want to add just a pinch of dressiness, but prefer to maintain enough ease and simplicity for reading.

    Suggested Pairings with Merriweather:

    • Open Sans
    • Oswald
    • Pacifico
    • Josefin Slab
    • Open Sans Condensed
    • Special Elite
    • Seaweed Script
    • Francois One
    • Amatic SC
    • Cabin Sketch

Installing Your Font

EasyGoogleFonts

It’s easier than ever to start using any of the above suggested fonts (or any of the other hundreds of Google Fonts available) with the Easy Google Fonts plugin. Once you’ve downloaded it for free, uploaded it to your plugins and activated it, you can start playing around with your fonts right away from the Customizer.

In your WordPress admin, go to Appearance > Customize.

Easy Google Fonts

You’ll be able to start experimenting with as many Google Fonts as you want under the Typography option in the Customizer that appears to the left of your site preview. Click on Default Typography to start browsing fonts from the drop-down menus and choosing the ones you want for your paragraphs and your headings.

You can also access the plugin’s settings back in your WordPress admin, where you can create your own font controls for an even more customized look. They’ll also appear in your Customizer preview, and you can see how everything will look before you save it.

Wrapping Up

This was obviously just a very quick and simple rundown of how you can go about using ten of the most popular Google Fonts out there, but there are so many others that work with WordPress to make your site look awesome.

What are some of your favorite fonts (from Google or other) and how do you pair them? Let us know in the comments below.