Fontjoy: How to Use AI Font Pairing

Fontjoy is a free online tool that uses a neural network to generate font pairings automatically. Instead of manually browsing hundreds of fonts and testing combinations through trial and error, Fontjoy’s AI font pairing algorithm analyzes the visual characteristics of typefaces and suggests harmonious combinations in seconds. It has become one of the most popular font pairing tools among designers, developers, and content creators who want high-quality typography without spending hours on manual selection.

In this guide, we will explain how Fontjoy works, walk through the interface step by step, share tips for getting the best results, showcase example pairings, and compare it to alternative tools.

How Fontjoy Works

At its core, Fontjoy uses deep learning to understand the visual relationships between fonts. The system was trained on font data to learn which typographic characteristics complement each other and which clash. Rather than relying on pre-curated pairing lists (like many simpler tools), Fontjoy generates novel combinations on the fly by analyzing the underlying visual features of each font.

The algorithm considers factors like:

• Stroke contrast: The ratio of thick to thin strokes in a typeface
• Weight: How heavy or light the letterforms appear
• Width: How condensed or extended the characters are
• X-height: The relative height of lowercase letters
• Serif style: Whether the font has serifs, and if so, what kind
• Geometric vs. humanist qualities: How mechanical or organic the letterforms feel

The neural network maps these features into a mathematical space where similar fonts are close together and contrasting fonts are far apart. When you ask Fontjoy to generate a pairing, it selects fonts that have enough contrast to create visual interest but enough shared characteristics to feel harmonious together.

This approach is fundamentally different from rule-based systems that simply pair serif with sans-serif. Fontjoy can suggest non-obvious pairings, like two sans-serifs with complementary proportions, that a human designer might not have considered but that work beautifully together.

Step-by-Step Guide to Using Fontjoy

Step 1: Open the Interface

Navigate to fontjoy.com. The interface is minimal and intuitive. You will see three font display areas stacked vertically, labeled for heading, subheading, and body text. Each area shows a sample sentence rendered in a randomly selected font. At the top of the page, you will find the Generate button and the contrast slider.

Step 2: Generate Your First Pairing

Click the “Generate” button. Fontjoy will instantly replace all three fonts with a new AI-generated combination. The heading, subheading, and body fonts are selected to work together as a cohesive typographic system. Take a moment to read through the sample text and assess how the three fonts relate to each other.

Step 3: Adjust the Contrast Slider

The contrast slider is Fontjoy’s most important control. It determines how different the generated fonts will be from each other:

• Low contrast: Fonts will be similar in style and character. This is useful when you want a subtle, understated typographic palette where the fonts harmonize closely.
• Medium contrast: Fonts will have noticeable differences while maintaining a cohesive feel. This is the sweet spot for most projects.
• High contrast: Fonts will be dramatically different from each other. This creates bold, dynamic pairings with strong visual variety. High contrast works well for designs that need to make a strong impression.

Experiment with different positions on the slider. Moving from low to high contrast completely changes the character of the generated pairings. Most designers find that medium to medium-high contrast produces the most useful results for typical projects.

Step 4: Lock Fonts You Like

The lock feature is what makes Fontjoy truly powerful as a font pairing tool. Click the lock icon next to any font you want to keep. When you click Generate again, Fontjoy will only replace the unlocked fonts, finding new options that pair well with your locked selection.

This is incredibly useful in several scenarios:

• You already have a heading font chosen for your brand and need matching body and subheading fonts.
• You love two of the three generated fonts but want to try different options for the third.
• You want to explore multiple body font options while keeping a heading and subheading pairing constant.

Lock and generate repeatedly to cycle through options. You will often discover unexpected pairings that you would never have found through manual browsing.

Step 5: Edit Sample Text

Click on any sample text in the display areas to type your own custom text. This is essential for evaluating how the fonts will look with your actual content. A font pairing that looks great with generic sample text might not work with your specific headlines, brand name, or body copy. Always test with real content before committing to a pairing.

Step 6: Identify and Source the Fonts

Fontjoy displays the font name below each sample text area. Most fonts in Fontjoy’s database come from Google Fonts, which means they are free and easy to access. To use a font you found on Fontjoy, simply search for it on Google Fonts and download or link it to your project.

Some fonts may also be available on other platforms. For example, many Google Fonts are included in Canva’s built-in library, and some are available through Fontshare [LINK: /fontshare/] or other free font resources.

Tips for Getting the Best Results from Fontjoy

Generate Many Times

Do not settle for the first generation. Click Generate at least 15 to 20 times before narrowing your options. The AI draws from a large font database, and the best pairings often come after multiple generations. Treat it like panning for gold: sift through many results to find the gems.

Use the Lock Feature Strategically

Start by generating freely until you find one font you love, then lock it and generate to find its ideal partners. This targeted approach is much more efficient than hoping all three fonts in a random generation will be perfect.

Test at Multiple Sizes

Fontjoy displays fonts at fixed sizes in its interface. A font that looks great in Fontjoy’s preview might not work at the sizes you actually need. After finding a promising pairing, test it in your design tool at the actual sizes you plan to use. A heading font displayed at Fontjoy’s default size might look too thin or too heavy at your specific heading size.

Consider Your Project Context

Fontjoy does not know whether you are designing a wedding invitation or a tech startup landing page. The AI optimizes for visual harmony between the fonts, but you need to evaluate whether the mood and personality of the pairing matches your project. A technically well-paired combination of fonts might still be wrong for your specific audience and message.

Do Not Always Use All Three Fonts

Fontjoy generates three fonts (heading, subheading, body), but many designs only need two. If you find a great heading and body combination, feel free to ignore the subheading suggestion. Or use the subheading font only for specific accent elements like captions or pull quotes. Fewer fonts typically means a cleaner design.

10+ Example Fontjoy Pairings

Here are example pairings you can generate or approximate using Fontjoy, along with suggested use cases for each.

1. Playfair Display / Source Sans Pro / Lora

An editorial pairing that feels sophisticated and readable. The high-contrast Playfair Display heading grabs attention, Source Sans Pro provides a clean subheading, and Lora’s warmth makes the body text comfortable for extended reading. Ideal for blogs, online magazines, and content-heavy websites.

2. Oswald / Roboto / Merriweather

A versatile combination with strong hierarchy. Oswald’s condensed boldness commands the heading, Roboto’s neutral character handles the subheading, and Merriweather’s serif warmth adds texture to the body. Works well for news sites, corporate blogs, and informational pages.

3. Archivo Black / Nunito / PT Serif

A bold, modern pairing with depth. Archivo Black’s heavy weight makes an impact at headline size, Nunito’s rounded forms soften the subheading, and PT Serif’s classic proportions ground the body text. Great for marketing landing pages, product features, and campaign materials.

4. Cormorant Garamond / Montserrat / Source Serif Pro

An elegant, refined pairing that bridges traditional and modern sensibilities. Cormorant Garamond’s delicate heading contrasts with Montserrat’s geometric subheading, and Source Serif Pro provides a reliable body text. Perfect for luxury brands, cultural institutions, and high-end portfolios.

5. Raleway / Open Sans / Crimson Text

A light, airy combination that feels approachable and modern. Raleway’s thin elegance leads the heading, Open Sans provides a neutral subheading, and Crimson Text adds literary warmth to the body. Suits personal blogs, wellness brands, and creative portfolios.

6. Poppins / Work Sans / Libre Baskerville

A contemporary pairing with personality. Poppins’ geometric friendliness handles the heading, Work Sans’ professional tone manages the subheading, and Libre Baskerville’s traditional serif grounds the body. Excellent for SaaS products, startup websites, and tech blogs.

7. Anton / Rubik / Noto Serif

An energetic, high-contrast combination. Anton’s ultra-bold condensed heading creates immediate impact, Rubik’s rounded sans-serif softens the subheading, and Noto Serif provides comprehensive body text coverage. Works for event promotion, sports brands, and bold social media campaigns.

8. Bitter / Karla / IBM Plex Sans

A professional, no-nonsense pairing. Bitter’s slab serif heading feels authoritative, Karla’s grotesque character provides a direct subheading, and IBM Plex Sans delivers clean, modern body text. Ideal for developer documentation, technical writing, and B2B websites.

9. Josefin Sans / Quicksand / Cardo

A light, geometric pairing with character. Josefin Sans’ vintage-modern heading pairs with Quicksand’s rounded subheading and Cardo’s old-style body text. The combination feels creative and distinctive. Suits design portfolios, boutique brands, and artisanal products.

10. DM Serif Display / Inter / Charter

A sharp, contemporary pairing. DM Serif Display’s refined heading contrasts with Inter’s interface-optimized subheading and Charter’s screen-friendly body serif. This combination works seamlessly for modern web design, digital publications, and app marketing pages.

11. Abril Fatface / Lato / Georgia

A dramatic, fashion-forward pairing. Abril Fatface’s high-contrast didone heading makes a statement, Lato’s warm sans-serif handles the subheading, and Georgia’s familiar serif provides comfortable body text. Perfect for fashion editorials, art galleries, and creative agencies.

Fontjoy vs. Other Font Pairing Tools

Fontjoy vs. Google Font Pairing

Google Fonts offers a “Pairings” feature that suggests fonts commonly used together based on usage data from the web. While useful, Google’s suggestions are based on popularity rather than visual analysis. Fontjoy often produces more interesting and less predictable pairings because its neural network analyzes actual typographic features rather than just tracking which fonts web designers tend to use together.

Fontjoy vs. Archetype by Our Own Thing

Archetype (archetypeapp.com) lets you test font pairings in a real web page context, showing how fonts look in actual paragraphs, headings, and UI elements. It is more of a testing tool than a suggestion tool. The ideal workflow often combines both: use Fontjoy to discover pairings, then use Archetype to test them in realistic contexts.

Fontjoy vs. Manual Font Pairing

Experienced designers often pair fonts manually based on their knowledge of type history, visual relationships, and project context. Manual pairing typically produces the most tailored results because the designer considers factors the AI cannot, like brand personality, audience demographics, and cultural associations. However, Fontjoy is an excellent starting point even for experienced designers, as it can surface combinations that fall outside the designer’s usual preferences and assumptions.

Fontjoy vs. Adobe Font Pairings

Adobe Fonts (formerly Typekit) offers curated font pairing recommendations within its premium library. The quality of adobe font pairings is generally high because the recommendations are made by type professionals. However, Adobe Fonts requires a Creative Cloud subscription, while Fontjoy is completely free. Adobe’s library also includes many premium fonts not available on Google Fonts, which gives it an advantage in font quality and variety. For designers already in the Adobe ecosystem, Adobe Font Pairings is worth exploring alongside Fontjoy.

Limitations of Fontjoy

While Fontjoy is an excellent tool, it has limitations worth acknowledging.

Limited font library: Fontjoy primarily draws from Google Fonts, which means premium typefaces from foundries like Hoefler, Commercial Type, and Klim are not included. If your project uses licensed commercial fonts, you will need to find pairings manually or use them as locked fonts to pair with Google Fonts alternatives.

No context awareness: The AI does not know your project type, audience, or brand guidelines. A technically harmonious pairing might be completely wrong for your specific design context. You must always apply your own judgment to the AI’s suggestions.

Display-size bias: Fonts in Fontjoy are displayed at relatively large sizes. Some pairings that look great in the preview may not perform well at body text sizes or when used for dense paragraphs. Always test pairings at actual usage sizes.

No weight or style control: Fontjoy generates pairings using default weights and styles. You cannot specify that you want a light heading font or a bold body font. After finding a pairing you like, you will need to experiment with weights and styles in your design tool.

No export or save feature: Fontjoy does not offer a way to save or bookmark pairings. If you find a combination you like, note the font names immediately. Closing the tab or clicking Generate will replace the current pairing permanently.

Despite these limitations, Fontjoy remains one of the most efficient ways to discover font pairings, especially for designers working with Google Fonts. The time savings compared to manual browsing are significant, and the AI’s ability to surface non-obvious pairings adds genuine creative value.

Frequently Asked Questions

Is Fontjoy free to use?

Yes, Fontjoy is completely free with no account required. Simply visit fontjoy.com and start generating pairings immediately. There are no premium tiers, usage limits, or hidden costs. The fonts it suggests are primarily from Google Fonts, which are also free for personal and commercial use.

How does Fontjoy’s AI font pairing actually work?

Fontjoy uses a deep learning neural network trained on font data to understand the visual relationships between typefaces. The algorithm maps fonts into a mathematical space based on their visual features, including stroke contrast, weight, width, x-height, and serif style. When generating a pairing, it selects fonts that occupy complementary positions in this space: different enough to create contrast but related enough to feel harmonious. The contrast slider adjusts how much distance in this space is allowed between the selected fonts.

Can I use Fontjoy to find pairings for fonts not in its database?

Not directly. Fontjoy’s database is primarily Google Fonts. However, you can use a workaround: find a Google Font that is visually similar to your target font, lock it in Fontjoy, and generate pairings. Then apply those pairing suggestions to your actual font. For example, if your brand uses a custom geometric sans-serif, lock Montserrat (a similar Google Font) in Fontjoy and use the generated serif pairings with your custom font.

What is the best contrast setting on Fontjoy?

Medium to medium-high contrast typically produces the most usable pairings for most design projects. Low contrast generates fonts that are very similar to each other, which can feel monotonous. Very high contrast generates fonts that are dramatically different, which can feel disjointed. Start at medium contrast, generate several options, then experiment with higher or lower settings to see how the results change.

Is Fontjoy better than choosing fonts manually?

Fontjoy is best used as a starting point and discovery tool rather than a replacement for manual selection. It excels at surfacing combinations you might not have considered and saves significant time compared to browsing hundreds of fonts individually. However, the final decision should always involve your own judgment about whether the pairing suits your specific project, audience, and brand. Many experienced designers use Fontjoy to generate a shortlist of candidates and then refine the selection manually.