1. Home
  2. Web
  3. Pair google fonts

How To Easily Pair Google Fonts Correctly

When you create a document, the rule of thumb is to use only one font. Using multiple fonts is never a good idea. This rule goes out the window when you’re designing for print or the web. Using different fonts can actually make a poster or a banner image look good. Finding fonts isn’t easy but pairing them is even harder. The amount of trial and error involved is time consuming. Google Fonts are a popular source of free fonts. If you’re using Google font, you need to give Bandmark’s Font Generator a try. It’s a web app that lets you pair Google fonts.

The web app lets you pair up to three Google fonts. You can manually choose which three fonts you want to use and see how they look together, or you can choose one font and the app will tell you which two others to pair with it. You can choose how different or how similar the fonts should be from each other.

Pair Google Fonts

Visit the Font Generator app. If you’ve already picked a font, select it from the dropdown. If not, you can use the app’s random pairing tool. You can choose all three fonts to see how they look side by side. To choose how different a font is, use the variation slider below the font selection tool and set a level of variation.

Ideally, the font name in the font dropdown should change when you increase or decrease the variation but it doesn’t always do that. It’s a small bug with the app but nothing you should be too worried about. Scroll down to the preview section to see how the fonts look next to each other. If you like what you see, you can click the font and it will take you to the download page.

If you scroll further down, the tool will give you a link to share the current font pairing with anyone.

HTML & CSS

The Bandmark’s Font Generator even gives you the HTML and CSS code snippet to add to your website if you want to use the fonts for a web page. If you aren’t looking to pair fonts for a web page, you can just download them and install them on your system to use in your design tools/apps.

Bandmark’s Font Generator works like a color palette generator. With color palette generators, you can choose how many colors are in a theme and how much each color contrasts with the other. Unerstandably, this tool is limited to a finite number of free fonts. You can’t expect it to be able to find and create font pairings with every font ever because there are just too many of them.