Google Fonts

Google Fonts is a library of over 800 different typefaces, completely ready to be embedded in your web project. This series looks at what Google Fonts is, and shares interesting examples and combinations of fonts that can take your project to the next level.

Interested in a few of our picks for under-used Google Fonts that have a bit more unique character? We’ll be taking a look at those as well, to help your layout stand out from the crowd.

What is Google Fonts?

google fonts
“The open source fonts in the Google Fonts catalog are published under licenses that allow you to use them on any website, whether it’s commercial or personal.” – Google Fonts FAQ

Google Fonts is a collection of more than 800 typefaces that designers and developers can use for free. Fonts are available in an interactive gallery/directory where you can view and preview as well as pair typefaces before you design with them.

Google Fonts is available for website use via APIs and including typeface information in the stylesheet and CSS. Google Fonts are also downloadable.

Any user can access and use Google Fonts for personal or commercial projects thanks to open source licensing.

How to Use Google Fonts in 3 Steps

google fonts

While the idea of adding fonts to a web project might intimidate some, it’s actually pretty easy. You can do it in three steps and be ready to use Google Fonts right away. The hardest part might be narrowing your selection down to just one or two typefaces.

  1. Add a stylesheet link to your website: Make sure to include the stylesheet link with the desired font name that you plan to use.
  2. Use the font in a CSS style: Then you can style elements using that font name as well.
  3. Add font effects: Google Fonts also has a beta font effects tool so you can add extra styling to typefaces for special uses. Effects include everything from a neon glow to 3D effects, to shadows to anaglyphs.

You can find complete instructions and code snippets from Google Fonts here.

3 Classic Google Font Combinations

google fonts
google fonts
google fonts

With so many choices, the hardest part of using Google Fonts is picking what fonts to use. Sometimes the best choice is a classic combination that’s been tested and is easy to read and familiar to the eye.

Here are three classic Google Font combinations:

  • Droid Serif and Droid Sans: When in doubt, pair fonts from the same family.
  • Dancing Script and Josefin Sans: When you need a script, put it with a simple sans serif as to not interrupt reading flow.
  • Arvo and PT Sans: A nice heavy font is great for headlines while a simple sans serif is nice for everything else.

3 Under-Used Google Font Typefaces We Love

google fonts
google fonts
google fonts

While some Google Fonts such as Roboto and Lobster get all the attention, there are plenty of great typefaces that aren’t as commonly used in the collection. If you dig a little, you can find a hidden gem for projects that will feel unique.

  • Poppins: The round shapes and wide range of styles in this family make it a highly versatile sans serif.
  • Domine: Everyone needs a great serif option; this one has a lot of character and is quite readable.
  • Erica One: Add this fun typeface to your collection for use when the project is just right.