I love Google Web Fonts. They're free, they're stylish, and they're easy to use on any website. There's one thing lacking from the web fonts interface though — it's not easy to preview how different fonts look together. That's where developer Chip Cullen's web app, The Font Combinator, comes in!
The Font Combinator is so easy to use it barely needs a tutorial, but I want to give you a rundown of its features so you can use it to its fullest right away.
To start using the Font Combinator, go to www.font-combinator.com.
At the top of the page you'll find a sample article with a headline, subhead, and two paragraphs. At the bottom of the page you'll find simple controls for changing the font, the font size, the line height, the color of the text, and the color of the background.
The Font Combinator includes all of the Google Web Fonts, plus the traditional "web safe" system fonts like Arial, Helvetica, and Times New Roman. So handy for setting fallback fonts! The combinator automatically updates when a new font is added to the Google fonts collection, so it's always up to date.
Here's an example of the Font Combinator in action: I've selected three fonts for this demo. The headline is Syncopate, the subhead is Rammetto One, and the body text is in good ol' Georgia. I've also played around with the colors using the Combinator's built-in color picker.
Did you notice that I changed what the text says, too? Yet another cool feature! You can delete the default headings and paragraphs and replace them with your own.
You can hide portions of the demo text if you're not going to use all of the elements in your design. So, for example, if you're not planning to use a subhead and just want to test a headline and a paragraph font, you can easily hide the subhead by clicking the "hide" button. If you want it to come back, click the "show" button.
Here's another useful detail: if you resize your browser window, the combinator resizes along with it. This way you can test how your fonts will look in different sections of your site or in different viewports, and adjust your sizing (or font choices) accordingly.
I've spent hours playing with this addictive design tool, and if you're a font fan like me I bet you will, too! Many thanks to Chip Cullen for his hard work on this awesome app.
Installing Google Web Fonts
After you've chosen the perfect font, you're ready to install it! Check out How to Install Google Web Fonts on Your Blog for installation instructions.
Fonts in the title card: Alegreya SC and Pinyon Script, selected with the Font Combinator, of course!Embellishments: Creative Market
