If you’ve been working with WordPress for any time now, you’ve probably heard of Google Fonts.
Most themes integrate with Google Fonts to provide hundreds of free font options. For instance, all of our Pro Upgrades include this integration to add hundreds of fonts to choose from.
While you may or may not be familiar with it, there are lots of cool features that the average user totally overlooks, and many of these features can be quite helpful for creating a beautiful website.
In this tutorial, you’ll find five practical features you can use in Google Fonts to make great font selections for your brand
1. Test out custom text
The homepage of Google Fonts always displays the top trending fonts on the site. Each font has some “dummy text” filled in to showcase its character set, but you can change this on the fly.
For example, you can simply click on any of the text and start typing to enter in whatever you’d like.
While this is useful for selecting a general font for your website, it’s particularly helpful if you’re looking to select a font for your site title displayed in the header. It’s also useful if you’re on the hunt for a new logo.
2. Choose a “display” font
If there’s one thing you need to know about font selection, it’s how to use “display” fonts.
While you’ll do fine with a nice serif or sans-serif font for your post text, your headings and site title give you an opportunity to add some character. Don’t get me wrong, a nice font like Roboto that is designed for post text also works great for headings. However, you can often make your site more stylish by choosing a display font for the headings.
Display fonts are simply fonts that are designed to be displayed at large sizes. You can search specifically for display fonts on Google Fonts by unchecking all the other boxes in the sidebar, like this:
Can you imagine using the “Spicy Rice” font for your post text? Obviously, that would be an awkward choice, but for headings or your site title, a font like that can really round out the aesthetic of your website.
3. Compare fonts for the perfect pairing
When browsing fonts on Google Fonts, you can hover over a font and click the “See Specimen” link to further examine the font.
At the bottom of the next page, you’ll find a “popular pairings” feature.
Pairing fonts well is very challenging if you’re not well-versed in typography which makes this feature extremely useful. You can simply pick the second font from the popular pairings section and end up with a great aesthetic for your site.
4. Get the story behind the font
This is actually my favorite feature in Google Fonts.
It takes time to develop an eye for picking appropriate typefaces to match the mood and aesthetic you’re looking for. Sometimes, it’s helpful to find out what the original designer had in mind when they created the font.
After clicking the “See Specimen” link for a font, you can find an About section in the sidebar.
I always find it easier to use a font effectively after I learn about how and why it was designed.
5. Download fonts (and keep them synced)
Adding fonts to your website is pretty straight-forward and built into the Google Fonts process. However, you’ll need the fonts installed on your computer too if you want to use them in a program like Sketch or Photoshop.
The best way to download the fonts is with SkyFonts which Google Fonts recommends on their site as well.
This will let you quickly download entire font families (every weight) and keep them up-to-date on your computer.
Use Google Fonts like a pro
Whether you’re an experienced web designer or totally new to making websites, these tips will help you get the most out of your site.
I love using these features when picking out fonts for the themes I make, and I hope they’ll help you build a more beautiful website!
Have any questions or other features to share? Leave a comment below.