At the time that we’re writing this article, there are 884 different Google Font families available for free. That’s a lot of choices! Which is why you might be looking for someone to help you find that needle in a haystack with a list of the best Google Fonts.

We’ve got it for you, and then we’ll also share some best practices for using Google Fonts on WordPress.

Choosing a font is more than just an aesthetic choice – it can have a real effect on your site’s bounce rates and conversion rates, especially if you choose a font that’s hard for your visitors to read.

Basically, it pays to take a little time to pick the best Google Fonts family for your website, rather than throwing up the first font that you see!

The 10 Best Google Fonts According to the Wisdom of the Crowds

So how do you come up with a list of the best Google Fonts when so much of this is subjective? We don’t want this entire list to be subjective, so we’re going to go to the data to build a list of the best Google Fonts.

Basically, we’ll use the Google Fonts analytics to trust the wisdom of the crowds. With over 23 trillion total font views, Google has just a little bit of data to pull from. 😉

Then, we’ll go a bit beyond the raw popularity numbers and choose some up-and-coming fonts that are growing quickly. Ready? Let’s dive in…

1. Roboto

Roboto Google web font

Roboto Google font

Roboto is a sans-serif offering from Christian Robertson that was developed by Google as the system font for Android. It’s now massively popular, comes in 12 different styles, and makes multiple appearances on Google Fonts’ analytics. For example, Roboto is the most popular font. But Roboto Condensed is also the sixth most popular font, and Roboto Slab also makes an appearance at number 13!

2. Open Sans

Open Sans Google font

Open Sans Google font

Open Sans is a sans-serif font developed by Steve Matteson. Google uses Open Sans on some of its websites, as well as in its print and web ads.

3. Lato

Lato Google font

Lato Google font

Lato is another popular sans-serif offering, this time from Łukasz Dziedzic.

4. Slabo 27px/13px

Slabo Google font

Slabo Google font

Slabo is a serif font developed by John Hudson of Tiro Typeworks. What’s unique about this font is that it’s specifically designed to be used at a certain size – either 27px or 13px depending on your needs.

5. Oswald

Oswald Google font

Oswald Google font

Oswald is a sans-serif font originally developed by Vernon Adams.

6. Source Sans Pro

Source Sans Pro Google font

Source Sans Pro Google font

Source Sans Pro is a sans-serif font from Paul Hunt that was created for Adobe and was Adobe’s first open-source font.

7. Montserrat

Montserrat Google font

Montserrat Google font

Montserrat is a sans-serif font from Julieta Ulanovsky, who lives in the eponymous Montserrat neighborhood of Buenos Aires. With 18 different styles, you have quite a lot of choice.

8. Raleway

Raleway Google font

Raleway Google font

With 18 different styles, Raleway is another large-family sans-serif font, initially created by Matt McInerney. If you like Raleway and are looking for something unique, Raleway Dots offers similar styling with a dotted approach that can work for big headlines.

9. PT Sans

PT Sans Google font

PT Sans Google font

PT Sans was developed for the Public Types of Russian Federation and, as such, includes both Latin and Cyrillic characters. There are also several other fonts in the PT family, including some serif options.

10. Lora

Lora Google font

Lora Google font

Lora is a popular serif font that’s designed to work well both on your screen and in print.

Bonus Fonts + Up-And-Comers

By the numbers, the ten fonts above are the most popular Google Fonts. But only showing the most popular options does a disservice to great up-and-coming fonts that haven’t gotten the exposure to show up on the analytics.

Here are some of our favorites that didn’t make an appearance at the top of the analytics.

11. Noto Sans / Serif

  • Sans-serif or serif
  • Styles: 4 each
  • View Font
Noto Sans Google font

Noto Sans Google font

Noto is a Google-commissioned font that comes in both serif and sans-serif versions. It’s receiving regular updates, and there are now well over 100 Noto fonts, with more coming all the time!

12. Nunito Sans

Nunito Sans Google font

Nunito Sans Google font

Nunito Sans is a sans-serif option that’s rapidly growing in popularity (its use has tripled since last year).

13. Concert One

Concert One Google font

Concert One Google font

Concert One is a rounded grotesque typeface that makes a stellar option for headlines.

14. Prompt

Prompt Google font

Prompt Google font

Prompt is a sans-serif offering from Thai communication design firm, Cadson Demak.

15. Work Sans

Work Sans Google font

Work Sans Google font

Work Sans is a sans-serif font that’s optimized for use on screens. The designers recommend using the middleweight styles for anything from 14px-48px.

How to Create the Best Google Fonts Combinations

If you thought trying to choose one font from Google Fonts was hard, wait until you try to pair them up on your site! Thankfully, this isn’t a problem you have to solve yourself, unless you want to. There are a couple ways to come up with the best Google Fonts combinations.

First, the Google Fonts website itself will suggest popular pairings if you scroll down the page:

Where to find Google Fonts pairs

Where to find Google Fonts pairs

Beyond that, you can also use a site like Font Pair to get more suggestions.

Best Practices for Using Google Fonts on WordPress

Once you find the perfect fonts from Google Fonts, here are some best practices for using Google Fonts on WordPress.

Limit the Number of Font Weights You Use

Some of these fonts – like Montserrat and Raleway – come with 18 different font weights. While that’s good for giving you choice, you do not want to load all 18 weights on your WordPress site because it will slow your load times down. This is very important!

For most fonts, a good rule of thumb is to use 3 weights as a maximum:

  • Regular
  • Italic
  • Bold

A lot of WordPress sites we see nowadays are even skipping Italic and just going with 2 different font weights. If you’re embedding Google Fonts yourself, you can choose exactly which weights to include from the Customize tab at Google Fonts:

How to choose Google Fonts styles

How to choose Google Fonts styles

Most WordPress themes today include easy ways to choose which Google Fonts and weights you want to use. But, not all theme developers are focused on performance. So in some cases, it might be better to disable Google Fonts in your theme and add them yourself.

Consider Hosting Google Fonts Locally

As an alternative to serving up fonts from Google’s server, you can also host fonts locally, which might offer performance benefits. Although remember that most Google fonts are probably already cached in people’s browsers. So we recommend doing your own performance tests.

If you’re using a premium font other than Google fonts, like the “Brandon” font we use on our Kinsta site, then by all means hosting them locally (and serving them from your CDN) is the best route.  For more on this topic, check out our posts on how to host fonts locally.

Pick a Font That Will Get Updates

Fonts are just like WordPress plugins and themes – over time, they receive updates and improvements to make them even better. And while the stakes are nowhere near as dire as with WordPress plugins, it can still be beneficial to pick a font that receives regular updates. The Noto family from Google is one that has gotten regular updates since 2014.

Because most of the fonts on this list are popular, it’s probably a good bet that any font on this list will receive regular updates and improvements. And if you decide to go off-list, making sure whichever font you choose is popular enough to get attention is never a bad idea.

Don’t Forget Accessibility

According to the World Health Organization, as of 2017, an estimated 253 million people live with vision impairment: 36 million are blind and 217 million have moderate to severe vision impairment.

Looking for ways to improve your WordPress development workflow?

Kinsta’s hosting solution was built by developers for developers. Git, PHP 7, SSH, and WP-CLI, along with powerful staging and cloning environments gives you the tools you need to build sites faster!

When you’re using Google Fonts you get to control how it looks with CSS, such as color and size. So don’t forget to follow the Web Content Accessibility Guidelines (WCAG) 2.0. This will ensure your content is easily accessible by everyone.

Following these guidelines will make content accessible to a wider range of people with disabilities, including blindness and low vision, deafness and hearing loss, learning disabilities, cognitive limitations, limited movement, speech disabilities, photosensitivity and combinations of these.

One very important guideline is the color contrast. On an older design of the Kinsta website, our font was a little too light and visitors voiced their concerns as it made it hard to read. The last thing you want to do is publish amazing content just to have it become a strain on people’s eyes!

You can use a tool like the Color Contrast Checker from WebAIM to see if your font colors pass the official recommendations. Below you can see that the colors on our blog posts now past the test. 👍

Color contrast checker tool

Color contrast checker tool

What’s Your Favorite Font at Google Fonts?

Google Font is awesome and used by millions of websites on the web every day. Following best practices such as limiting font weights, hosting them locally (in some cases), and following accessibility guidelines, will ensure a better overall experience for your visitors.

Now over to you all – what are your favorite fonts and font pairs from Google Fonts? Let us know below in the comments.

The post 15 Best Google Fonts by the Numbers (Best Practices) appeared first on Kinsta Managed WordPress Hosting.

WP Hosting

[ continue ]