Google Fonts is one of those tools you use all the time, but never really explore. There’s sort of a funnel in place where you find a font, test drive it, and then get the code to add it to your site.
There is actually a lot of great ancillary functionality built into Google Fonts you may not be aware of, and that’s exactly what we’re going to look at in this post.
Here’s how to use Google Fonts in 5 ways you didn’t know about.
1. Poster Display for Font Discovery
Picking a font can be a lot of fun if you allow yourself to be open-minded, and even surprised by what you find. When searching for fonts in Google Fonts(GF), you can use the controls on the left to narrow down the selection in a utilitarian way.
However, at the beginning of a new creative project, you don’t want to narrow down the focus, you want to explore. A neat way to explore fonts with GF is to keep the fonts sorted by “trending” and then choose to display them in “poster” view.
Now you can scroll through the fonts and just pick out the ones that catch your eye. The less organized presentation makes it easier to scan randomly and enhances the feeling of discovery.
2. Closely Compare Fonts
In the “review” section, there is a tab called “test drive” that makes it easy to mix and match fonts displaying them as headings or in paragraphs or sidebars. This is helpful to see how they look together at a glance.
However, Google Fonts has much more precise tools for comparing fonts.
There is a “compare” tab that lets you compare the individual characters of one font to another. It’s fantastically useful for pairing fonts together. You can also use the slider in the middle of the menu to adjust the opacity of the fonts.
Taken from this excellent webdesign tuts tutorial, here are a few things to look for when creating attractive font combinations:
- do they have similar features (cap height, proportions, x-height)?
- do they have pleasing contrast (size, weight, form)?
At the individual character level, you get some great insight, but you’ll definitely want to spend time using full sentences/headings together to compare kerning and overall aesthetic.
3. Get the Story Behind the Font
I love reading font descriptions. Knowing why the font was made makes the way I use it more deliberate and educated. I almost feel blind using a font without knowing at least a bit about its history.
There are a few ways to get to the description of a font in Google Fonts, here’s one:
Just click the “pop out” button in the “Specimens” view which you’ll end up on by default. It will take you to a page like this:
Here you’ll find a description of the font and often a link to the font creator’s Google+ page.
4. Common Font Pairings
We already talked about pairing fonts, but Google Fonts has yet another tool for you!
In the same window we just opened with a “pop out” button, there is a tab called “pairings.” There you’ll find a handful of common pairings with the font you’re looking at.
This is a great way to find a font to pair with (obviously), but it’s also a good learning tool. If you’ve selected your own pairing, it’s helpful to see common combinations and compare your own choice.
5. Download Fonts (& Sync Them)
Adding fonts to your website is pretty straight-forward and built in to the Google Fonts process. However, you’ll probably need the fonts installed on your machine too, so you can use them in Photoshop/Illustrator/etc.
There is a download button present on most of the pages in GF at the top-right of the screen that is easy to overlook. As one of the options, you can download all the fonts you’ve selected in a .zip file.
That said, if you want to get real fancy, you can download SkyFonts (whoosh). With SkyFonts installed, you can instead choose the SkyFonts option which will take you to the download page where you can then select “Browse Google Fonts.” Then you can select the font you want and install it instantly.
The process is a bit wonky, but the benefits:
- installs in one click
- no mess of zip files
- syncs to the cloud
That last part, the syncing, means that any updates to the font will automatically update on your machine, which is a nice touch. I mean, why not?
How to Use Google Fonts Like a Pro
Now you know all about Google Fonts and it’s many available features.
If I were you I’d be so jazzed up about all these cool new things, I’d go try’em all out now. Have fun and use these tools to create beautiful web typography 🙂