Google Fonts offers designers a wide variety of typefaces to use for all their design purposes.
The best part: They’re absolutely free.
That’s right. All of the fonts in Google’s library are free and open source. You can use any font you want for any project you’d like: your business’s new logo, a poster for band’s upcoming show, or that newsletter you’ve been meaning to write.
As of May 2019, there are more than 900 fonts to choose from—which means you could spend days choosing the right one.
Luckily, you don’t have to. That’s because we’ve compiled the 11 best Google Fonts for you to use in your next design project.
Later, we’ll show you how you can use the Google Fonts—as well as some best practices to keep in mind when choosing fonts.
11 best Google Fonts for your next design
Below are the 11 best Google Fonts. They are:
With each, we’ve also included a sample of how each design could look in all of its different styles, as well as who designed it.
Let’s jump in:
Designed by: Christian Robertson
Styles: 12
See it in action:
With more than 5 trillion (that’s with a “t”) total views, Roboto is the most popular and downloaded font in Google’s typeface library by far.
It’s a friendly-yet-dignified font first developed by Christian Robertson as the default for all of Google’s in-house typeface. Great for a legible reading experience on your computer or mobile device.
Designed by: Vernon Adams
Styles: 6
See it in action:
Oswald is a simple, elegant font that’s a refresh of the classic Alternate Gothic typeface family. Created by typographer Vernon Adams, the font was continually updated by the designer up until 2014 when he was involved in a tragic accident that ultimately claimed his life.
The work Adams put into the typeface is extraordinary, especially when you consider the fact that Oswald has been viewed billions of times. It’s a great font for computers and mobile devices.
Designed by: Steve Matteson
Styles: 10
See it in action:
Open Sans comes from the humanist family of typefaces: fonts that were inspired and based on Renaissance calligraphy reminiscent of human handwriting. The font is also used by Google throughout a variety of their products. It’s a great Swiss Army Knife font for both print and digital projects.
Designed by: Łukasz Dziedzic
Styles: 10
See it in action:
Another sans serif typeface, this time from Warsaw-based designer Łukasz Dziedzic. With updates as recent as 2014, this font offers semi-rounded features which gives it a “feeling of warmth,” according to the designer. That’s reflected in its name: “Lato” is Polish for summer.
Keen-eyed readers might notice that this font is the default for WordPress’s popular Twenty Fourteen theme.
Designed by: Indian Type Foundry
Styles: 18
See it in action:
Poppins is a geometric sans serif font with influence and support from the Devanagari and Latin writing systems—which is cool because the Devanagari system is used in more than 120 Indo-Aryan languages, including Hindi, Nepali, Sanskrit, and Urdu.
Designed by: Cyreal
Styles: 4
See it in action:
Lora is a popular serif font influenced by calligraphy. According to the designer, “[The] overall typographic voice of Lora perfectly conveys the mood of a modern-day story, or an art essay.”
Designed by: Philipp Hubert and Sebastian Fischer
Styles: 10
See it in action:
A nice, friendly, sans serif font, Rubik has rounded corners and a lighter feel making it perfect for digital texts. Originally, this typeface was designed by Philipp Hubert and Sebastian Fischer at Hubert & Fischer for Google’s Chrome Cube Lab project.
It got a redesign for Hebrew in 2015 by Meir Sadan, followed by a Cyrillic redesign by Alexei Vanyashin in 2016.
Designed by: Julieta Ulanovsky
Styles: 18
See it in action:
Montserrat is an elegant sans serif last updated in 2017. Birthed from a Kickstarter project, the typeface was inspired by the urban typography found in posters and signs found in the Julieta Ulanovsky’s home in the Montserrat neighborhood in Buenos Aires.
It’s a love letter to the early-20th century typefaces that used to be found all over the South American city.
Designed by: Paul D. Hunt
Styles: 12
See it in action:
Source Sans Pro is a simple but elegant sans serif. It also has the distinction of being Adobe’s first open source typeface for use in user interfaces. The font is also an incredibly popular one with more than 4.3 million websites leveraging the typeface. Great for digital use.
Designed by: ParaType
Styles: 4
See it in action:
This sans serif was originally developed as part of the “Public Types of Russian Federation,” a project dedicated to the 300th anniversary of Peter the Great’s Bulavin Rebellion—because nothing says “Russia’s violent, blood-soaked history” quite like a handsome typeface. The typeface comes in both Latin and Cyrillic styles, and works very well with digital projects.
Designed by: Jonny Pinhorn
Styles: 4
See it in action:
Karla is a grotesque sans serif font. It’s a fun and simple typeface that adds character to any body copy.
How to use Google Fonts
The ways you use Google Fonts can be endless, but there are only a few ways you can actually get the fonts to use them.
We’re going to walk you through two common ways of doing it. They are:
Let’s jump in.
Hosting the font on your server
Google recently announced that you no longer have to self-host your Google Fonts in order to get “font-display=swap” which is great!
That means you don’t have to download Google Font in order to avoid the dreaded “flash of invisible text.” Instead, your website will now show an unstylized font as decided by the browser your user is on.
If you still want to host your Google Fonts locally, you’re going to have to download the file directly onto your computer—which is pretty simple.
First, go to the Google Fonts homepage.
Now choose the font you want to download by clicking on the + button next to it.
If you don’t see the font you want to download, simply search for it in the upper right hand corner.
Choose as many fonts as you’d like to download. They’ll all appear in a download drawer at the bottom of the screen until you’re ready. When you are, click on the drawer. Then, click on the download button in the upper right hand corner.
The fonts will be downloaded as a .zip file onto your computer. You will then be able to upload them to your server using your preferred method.
Linking to Google
Go to the Google Fonts homepage.
Open the fonts you want by clicking on the “+” button next to them.
If you don’t see the font you want to download, simply search for it in the upper right hand corner.
Choose as many fonts as you’d like to download. They’ll all appear in a download drawer at the bottom of the screen until you’re ready. When you are, click on the drawer.
The first box will contain the code for you to place in your website’s
. Do so.
The second box will contain the code to place in your website’s CSS file. Do so.
Once you’ve completed those steps, voila! You’ve just added the Google Font to your website.
BONUS: How to use Google Fonts with WordPress
If you’re using WordPress, all you need is the right plugin.
The best one we’ve found is Easy Google Fonts. This plugin will allow you to add Google Fonts to your WordPress site easily with zero HTML knowhow needed.
Follow the steps below to do so:
- Go to your WordPress dashboard.
- Click on Plugins on the left hand side.
- Click on Add New at the top.
- Search for Easy Google Fonts. It should be the first result by Titanium Themes.
- Click Install Now.
- Once it’s installed, click on Activate.
And that’s it! Once activated, hover on Settings on the left hand side and click on Google Fonts to create a new font control. This will allow you to jump into your WordPress theme and customize your website to include all the new fonts.
5 tips for using Google Fonts
With more than 900 fonts to choose from, it can be hard to pick one that works for your project.
Luckily, there are a few solid rules of thumb you can use to make sure that each font works for you:
- Use them sparingly. It’s fun to mix fonts, but it’s easier on your readers’ eyes and your website host if you limit yourself to just three fonts on a single page.
- Use the right tools. When you’re trying to see which fonts pair well together, be sure to use handy web tools like FontPair or aggregators like Typio for inspiration and guidance.
- Keep your brand in mind. A font is a great way to showcase your brand in a subtle but incredibly effective way. Each one showcases different moods and ideas. Be sure to pick one that matches the message your brand wants to convey.
- Be consistent. Make sure your fonts are consistent across your interface to keep in line with your brand identity. If you’re offering text across different languages, be sure to pick a font that offers text in that script. Google’s Noto font does this exceptionally well (see below).
Looking for more information on fonts? Be sure to check out these articles for more tips:
Once you’ve got your font choices down, make sure to add them to your design system in InVision’s new Design System Manager. Don’t have a DSM account yet? Be sure to sign up today. Current DSM users, sign in below to take these new features for a spin.
Leave a reply