$ Presets
# Heading font
# Body font
$ Preview
</> Code
$ How to use the font pair generator
Start by picking a preset pairing — these are tried-and-tested combinations that work well together. Or go custom: choose a heading font and a body font from the dropdowns (all from Google Fonts), adjust sizes and weights, and watch the preview update live. Switch between article, hero, and card previews to see how the pair behaves in different contexts. When you're happy, copy the import or CSS and paste it into your project.
What makes a good font pairing
The best pairings create contrast without clashing. A common pattern is a serif or display font for headings paired with a clean sans-serif for body text. The heading grabs attention; the body stays readable. Avoid pairing two fonts that are too similar — if you squint and can't tell them apart, pick something with more personality for the heading.
Why this matters for your app
Your App Store screenshots, landing page, and in-app UI all benefit from consistent, well-paired typography. The fonts you choose set the tone — playful, professional, minimal, bold. Getting the pairing right early saves redesign work later. Use this tool to experiment quickly, then take the exact CSS into your project.
$ FAQ
Is this free?
Yes — completely free, no signup, no limits. It runs entirely in your browser and loads fonts directly from Google Fonts.
Can I use these fonts in my app?
All fonts here are from Google Fonts and are open-source. You can use them in apps, websites, print — anywhere. Check each font's license on Google Fonts for details (most are SIL Open Font License).
How do I add the fonts to my project?
Copy the <link> tag or @import line from the code section and add it to your HTML or CSS. Then use the font-family declarations shown in the CSS output.
Why do some weights show as unavailable?
Not every Google Font supports all weights. The weight chips only show weights that the selected font actually provides.