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!
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.
— 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…
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!
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.
Lato is another popular sans-serif offering, this time from Łukasz Dziedzic.
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.
Oswald is a sans-serif font originally developed by Vernon Adams.
Source Sans Pro is a sans-serif font from Paul Hunt that was created for Adobe and was Adobe’s first open-source 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.
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.
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.
Lora is a popular serif font that’s designed to work well both on your screen and in print.
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.
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!
Nunito Sans is a sans-serif option that’s rapidly growing in popularity (its use has tripled since last year).
Concert One is a rounded grotesque typeface that makes a stellar option for headlines.
Prompt is a sans-serif offering from Thai communication design firm, Cadson Demak.
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.
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:
Beyond that, you can also use a site like Font Pair to get more suggestions.
Once you find the perfect fonts from Google Fonts, here are some best practices for using Google Fonts on WordPress.
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:
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:
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.
Variable fonts also starting to become popular, and are supported by all modern browsers. These are awesome because it allows one font file to simply transform with different properties. However, there aren’t a lot of free fonts to choose from yet. However, Google does have a few variable fonts in Early Access.
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.
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.
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.
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. 👍
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.
Send this to a friend