On the time that we’re writing this text, there are 884 other Google Font households to be had free of charge. That’s numerous alternatives! Which is why you could be on the lookout for somebody that will help you to find that needle in a haystack with a listing of the most productive Google Fonts.
We’ve were given it for you, after which we’ll additionally percentage some very best practices for the use of Google Fonts on WordPress.
Opting for a font is extra than simply a cultured selection – it may have a real effect to your web page’s bounce rates and conversion rates, particularly if you select a font that’s laborious on your guests to learn.
Principally, it can pay to take a while to pick out the most productive Google Fonts family members on your website online, fairly than throwing up the primary font that you simply see!
The ten Best possible Google Fonts In step with the Knowledge of the Crowds
So how do you get a hold of a listing of the most productive Google Fonts when such a lot of that is subjective? We don’t need this whole listing to be subjective, so we’re going to visit the knowledge to construct a listing of the most productive Google Fonts.
Principally, we’ll use the Google Fonts analytics to believe the knowledge of the crowds. With over 23 trillion general font perspectives, Google has just a bit bit of information to drag from. 
23 trillion general font perspectives, and counting.
https://t.co/g5dp3e622g pic.twitter.com/lePJIRgbIU
— Google Fonts (@googlefonts) August 7, 2018
Then, we’ll pass a little bit past the uncooked reputation numbers and select some up-and-coming fonts which are rising temporarily. In a position? Let’s dive in…
1. Roboto
- Sans-serif
- Kinds: 12
- View Font
Roboto Google font
Roboto is a sans-serif providing from Christian Robertson that was once advanced through Google because the machine font for Android. It’s now hugely in style, is available in 12 other kinds, and makes a couple of appearances on Google Fonts’ analytics. For instance, Roboto is the most well liked font. However Roboto Condensed could also be the 6th hottest font, and Roboto Slab additionally makes an look at quantity 13!
2. Open Sans
- Sans-serif
- Kinds: 10
- View Font
Open Sans Google font
Open Sans is a sans-serif font advanced through Steve Matteson. Google makes use of Open Sans on a few of its internet sites, in addition to in its print and internet advertisements.
3. Lato
- Sans-serif
- Kinds: 10
- View Font
Lato Google font
Lato is every other in style sans-serif providing, this time from Łukasz Dziedzic.
4. Slabo 27px/13px
- Serif
- Kinds: 2
- View Font
Slabo Google font
Slabo is a serif font advanced through John Hudson of Tiro Typeworks. What’s distinctive about this font is that it’s particularly designed for use at a undeniable dimension – both 27px or 13px relying to your wishes.
5. Oswald
- Sans-serif
- Kinds: 6
- View Font
Oswald Google font
Oswald is a sans-serif font initially advanced through Vernon Adams.
6. Supply Sans Professional
- Sans-serif
- Kinds: 12
- View Font
Supply Sans Professional Google font
Supply Sans Professional is a sans-serif font from Paul Hunt that was once created for Adobe and was once Adobe’s first open-source font.
7. Montserrat
- Sans-serif
- Kinds: 18
- View Font
Montserrat Google font
Montserrat is a sans-serif font from Julieta Ulanovsky, who lives within the eponymous Montserrat community of Buenos Aires. With 18 other kinds, you will have relatively numerous selection.
8. Raleway
- Sans-serif
- Kinds: 18
- View Font
Raleway Google font
With 18 other kinds, Raleway is every other large-family sans-serif font, first of all created through Matt McInerney. When you like Raleway and are on the lookout for one thing distinctive, Raleway Dots gives identical styling with a dotted manner that may paintings for large headlines.
9. PT Sans
- Sans-serif
- Kinds: 4
- View Font
PT Sans Google font
PT Sans was once advanced for the Public Varieties of Russian Federation and, as such, contains each Latin and Cyrillic characters. There also are a number of different fonts within the PT family members, together with some serif choices.
10. Lora
- Serif
- Kinds: 4
- View Font
Lora Google font
Lora is a well-liked serif font that’s designed to paintings neatly each to your display screen and in print.
Bonus Fonts + Up-And-Comers
Via the numbers, the 10 fonts above are the most well liked Google Fonts. However simplest appearing the most well liked choices does a disservice to nice up-and-coming fonts that haven’t gotten the publicity to turn up at the analytics.
Listed here are a few of our favorites that didn’t make an look on the best of the analytics.
11. Noto Sans / Serif
- Sans-serif or serif
- Kinds: 4 each and every
- View Font
Noto Sans Google font
Noto is a Google-commissioned font that is available in each serif and sans-serif variations. It’s receiving common updates, and there at the moment are neatly over 100 Noto fonts, with extra coming always!
12. Nunito Sans
- Sans-serif
- Kinds: 14
- View Font
Nunito Sans Google font
Nunito Sans is a sans-serif possibility that’s unexpectedly rising in reputation (its use has tripled since ultimate yr).
13. Live performance One
- Sans-serif
- Kinds: 1
- View Font
Live performance One Google font
Live performance One is a rounded gruesome typeface that makes a stellar possibility for headlines.
14. Recommended
- Sans-serif
- Kinds: 18
- View Font
Recommended Google font
Recommended is a sans-serif providing from Thai verbal exchange design company, Cadson Demak.
15. Paintings Sans
- Sans-serif
- Kinds: 9
- View Font
Paintings Sans Google font
Paintings Sans is a sans-serif font that’s optimized to be used on monitors. The designers counsel the use of the middleweight kinds for the rest from 14px-48px.
How you can Create the Best possible Google Fonts Mixtures
When you concept attempting to make a choice one font from Google Fonts was once laborious, wait till you attempt to pair them up to your web page! Fortunately, this isn’t an issue you need to resolve your self, except you wish to have to. There are a pair techniques to get a hold of the most productive Google Fonts mixtures.
First, the Google Fonts website online itself will recommend in style pairings if you happen to scroll down the web page:
The place to search out Google Fonts pairs
Past that, you’ll be able to additionally use a web page like Font Pair to get extra tips.
Best possible Practices for The usage of Google Fonts on WordPress
When you to find the very best fonts from Google Fonts, listed here are some very best practices for the use of Google Fonts on WordPress.
Restrict the Choice of Font Weights You Use
A few of these fonts – like Montserrat and Raleway – include 18 other font weights. Whilst that’s just right for supplying you with selection, you do not need to load all 18 weights to your WordPress web page as a result of it’s going to slow your load times down. This is essential!
For many fonts, a just right rule of thumb is to make use of 3 weights as a most:
- Common
- Italic
- Daring
A large number of WordPress websites we see at the moment are even skipping Italic and simply going with 2 other font weights. When you’re embedding Google Fonts your self, you’ll be able to select precisely which weights to incorporate from the Customise tab at Google Fonts:
How to make a choice Google Fonts kinds
Maximum WordPress subject matters lately come with simple techniques to make a choice which Google Fonts and weights you wish to have to make use of. However, now not all theme builders are thinking about efficiency. So in some instances, it could be higher to disable Google Fonts on your theme and add them yourself.
Imagine Webhosting Google Fonts In the community
As a substitute for serving up fonts from Google’s server, you’ll be able to additionally host fonts in the neighborhood, which would possibly be offering performance benefits. Even though keep in mind that maximum Google fonts are most probably already cached in other folks’s browsers. So we propose doing your individual efficiency exams.
When you’re the use of a top rate font instead of Google fonts, just like the “Brandon” font we use on our Kinsta web page, then through all method internet hosting them in the neighborhood (and serving them out of your CDN) is the most productive course. For extra in this matter, take a look at our posts on how to host fonts locally.
Pick out a Font That Will Get Updates
Fonts are similar to WordPress plugins and subject matters – over the years, they obtain updates and enhancements to cause them to even higher. And whilst the stakes are nowhere close to as dire as with WordPress plugins, it may nonetheless be really helpful to pick out a font that receives common updates. The Noto family members from Google is person who has gotten regular updates since 2014.
As a result of many of the fonts in this listing are in style, it’s most probably a just right wager that any font in this listing will obtain common updates and enhancements. And if making a decision to move off-list, ensuring whichever font you select is in style sufficient to get consideration is rarely a nasty thought.
Don’t Disregard Accessibility
In step with the World Health Organization, as of 2017, an estimated 253 million other folks are living with imaginative and prescient impairment: 36 million are blind and 217 million have reasonable to critical imaginative and prescient impairment.
On the lookout for techniques to fortify your WordPress building workflow?
While you’re the use of Google Fonts you get to keep watch over the way it seems with CSS, similar to colour and dimension. So don’t overlook to apply the Web Content Accessibility Guidelines (WCAG) 2.0. This may increasingly ensure that your content material is well out there through everybody.
Following those tips will make content material out there to a much broader vary of other folks with disabilities, together with blindness and coffee imaginative and prescient, deafness and listening to loss, finding out disabilities, cognitive barriers, restricted motion, speech disabilities, photosensitivity and mixtures of those.
One crucial tenet is the colour distinction. On an older design of the Kinsta website online, our font was once a bit of too gentle and guests voiced their issues because it made it laborious to learn. The very last thing you wish to have to do is submit superb content material simply to have it develop into a pressure on other folks’s eyes!
fyi information web page font is a little bit too gentle making it laborious to learn – darker font can be higher 🙂
— George Liu (@centminmod) August 14, 2016
You’ll use a device just like the Color Contrast Checker from WebAIM to look in case your font colours go the professional suggestions. Underneath you’ll be able to see that the colours on our weblog posts now previous the check. 
Colour distinction checker instrument
What’s Your Favourite Font at Google Fonts?
Google Font is superior and utilized by tens of millions of internet sites on the net on a daily basis. Following very best practices similar to restricting font weights, internet hosting them in the neighborhood (in some instances), and following accessibility tips, will ensure that a greater total revel in on your guests.
Now over to you all – what are your favourite fonts and font pairs from Google Fonts? Tell us under within the feedback.
The put up 15 Best Google Fonts by the Numbers (Best Practices) gave the impression first on Kinsta Managed WordPress Hosting.
WP Hosting