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. 
23 trillion total font views, and counting.
https://t.co/g5dp3e622g pic.twitter.com/lePJIRgbIU
— Google Fonts (@googlefonts) August 7, 2018
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
- Sans-serif
- Styles: 12
- View 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
- Sans-serif
- Styles: 10
- View 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
- Sans-serif
- Styles: 10
- View Font
Lato Google font
Lato is another popular sans-serif offering, this time from Łukasz Dziedzic.
4. Slabo 27px/13px
- Serif
- Styles: 2
- View 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
- Sans-serif
- Styles: 6
- View Font
Oswald Google font
Oswald is a sans-serif font originally developed by Vernon Adams.
6. Source Sans Pro
- Sans-serif
- Styles: 12
- View 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
- Sans-serif
- Styles: 18
- View 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
- Sans-serif
- Styles: 18
- View 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
- Sans-serif
- Styles: 4
- View 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
- Serif
- Styles: 4
- View 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 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
- Sans-serif
- Styles: 14
- View 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
- Sans-serif
- Styles: 1
- View Font
Concert One Google font
Concert One is a rounded grotesque typeface that makes a stellar option for headlines.
14. Prompt
- Sans-serif
- Styles: 18
- View Font
Prompt Google font
Prompt is a sans-serif offering from Thai communication design firm, Cadson Demak.
15. Work Sans
- Sans-serif
- Styles: 9
- View 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
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
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?
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!
fyi guide page font is a bit too light making it hard to read – darker font would be better 🙂
— George Liu (@centminmod) August 14, 2016
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
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