Google Fonts Pair Finder

Google Fonts Pair Finder

Heading Font

Font Details
Filter
'Roboto', sans-serif
Heading Font Family
27
Font Size
700
Font Weight

Body Font

Font Details
Filter
'Roboto', sans-serif
Body Font Family
16
Font Size
400
Font Weight
Preview Content Type
Shuffle

How to Find Ideal Font Pair from Google Fonts?

When you start a new design, you need to pick a font pair for using as heading and body font. “Google Fonts Pair Finder” by 10015.io is one of the best tools for you to shorten this decision process.

Avatar
Jane Doe
UI/UX Lead
May 14, 2021 3:59 AM

Google Fonts is one of most popular and biggest open source font library. There are 1000+ fonts served on Google Fonts and the number is increasing day by day. When you start a new project, selecting the best font pair for you project is very important as it reflects the characteristic of your website.

Finding the best font match within 100,000+ possibilities

Since there are more than a thousand font family on Google Fonts, it means there are more than 100k possibilities theoratically which makes it hard to decide what to use. Google Fonts Pair Finder will solve this problem and fasten this process.

10015 Tools
+

Get “Online Tools” browser extension!

Access all tools powered by 10015.io with just one click

What is Online Google Fonts Pair Finder?

Google Fonts Pair Finder is a free online tool for finding font pairs from Google Fonts. Google Fonts is one of the biggest free font library that serves more than a thousand fonts. Since the number of fonts is huge, sometimes it becomes a time consuming process to find a good font pair to use on your designs and projects. Google Fonts Pair Finder is solving this problem by suggesting different font pairs randomly and giving you a change to preview this font pair for different content types like article, card and profile.

There are 5 font categories available which are Serif, Sans Serif, Display, Handwriting and Monospace. You can select categories which you want random suggestions by using the filter. Also, you can limit the number of top fonts that will be used to make you suggestions for font pairs. All filters are available both for heading and body font separately.

If you are looking for font suggestions for Google Fonts, there are 3 shuffleing options, one for heading font, one for body font and one for shuffleing the pair at the same time. When you get random suggestions and decide to use one of them, you can get random suggestiongs for seperately by shuffleing only the other one and make it constant the one you decided.

When you explore new fonts and searching for font matches, font weight will be set to 700 for heading and 400 for body if these are available. Otherwise, the closest weight will be set. Since each font has its own size chacacteristics, you can change font size and font weight from select menus to find a good size match.

If you want to see more detailed information about a font family, click on "Details" and it will show available subsets, weights, if italic style is available and give information about the rank of the font on Google Fonts with respect to popularity. Also, a preview box is available to show you the preview of font for different sizes and weights.

Here is a card preview for a random font pair suggestion;

Font Pair Suggestion Preview for a Card (Poppins for heading + Nunito for body)
Font Pair Suggestion Preview for a Card (Poppins for heading + Nunito for body)

How to use Online Google Fonts Pair Finder?

You can explore new fonts and find font pairs on Google Fonts by basically following these instructions.

  1. Change heading and body font either manually from the font list or by using shuffle buttons.
  2. You can set filters if you need only fonts from specific category or only top fonts.
  3. Font size and weight can be set manually if you need.
  4. After you finish font settings, you can preview the font pair result on different content types.
  5. If you make a final decision for a font pair, click on the "Get Font Pair" button and copy the codes to you clipboard either as a link or a css import and use in your projects right away.