Google Fonts offers designers a wide variety of typefaces to use for all their design purposes.
As of May 2019, there are more than 900 fonts to choose from—which means you could spend days choosing the right one.
We’ve highlighted 11 of them and showcased how they look in the wild. But it’s worth noting: the right typeface is contextual. Consider this a starting point for navigating the massive list of options in Google Fonts.
And later, we’ll show you how you can use Google Fonts on your website.
11 Google Fonts for your next design
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:
1. Roboto
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 font first developed by Christian Robertson as the default for all of Google’s in-house typeface of choice.
2. Oswald
Designed by: Vernon Adams
Styles: 6
See it in action:
Oswald is an homage to the Alternate Gothic typeface family. Created by type designer 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.
3. Open Sans
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.
4. Lato
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, Lato features slightly rounded strokes 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. It’s also used in Slack.
5. Poppins
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.
6. Lora
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.”
7. Rubik
Designed by: Philipp Hubert and Sebastian Fischer
Styles: 10
See it in action:
Rubik’s rounded edges and large counters give it a friendly feel. 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.
8. Montserrat
Designed by: Julieta Ulanovsky
Styles: 18
See it in action:
Montserrat is a 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.
9. Source Sans Pro
Designed by: Paul D. Hunt
Styles: 12
See it in action:
Source Sans Pro is a sans serif and 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.
10. PT Sans
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.
11. Karla
Designed by: Jonny Pinhorn
Styles: 4
See it in action:
Karla is a grotesque sans serif font that supports both Latin and Tamil scripts.
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 HTML “head” section.
The second box will contain the code to place in your website’s CSS file.
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.
***
Looking for more information on fonts? Be sure to check out these articles for more tips:
- 5 best practices for effectively pairing fonts
- 4 tips on typography in UI design
- Finding best free fonts for numbers
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.
by Tony Ho Tran
Tony is a content marketing consultant and freelance writer. His work has been seen in Business Insider, MSNBC, Hootsuite, and GrowthLab.
