Pick a font pairing, watch it come alive.
Overview
Browse curated pairings of open-source fonts: heading and body together. Tune the size, weight and sample text, then copy ready-made next/font, CSS or Google Fonts code straight into your project. Every font is self-hosted with next/font, so nothing loads from elsewhere.
Preview
A live specimen of the selected pairing. Edit the text, size and heading weight.
Design that speaks clearly
A good font pairing gives a site its voice. The headline catches the eye and the body keeps the reader. Together they set a tone that fits the brand.
Code
Copy the pairing straight into your project: next/font, plain CSS or Google Fonts.
import { Fraunces, Inter } from "next/font/google";
const heading = Fraunces({ subsets: ["latin"], variable: "--font-heading" });
const body = Inter({ subsets: ["latin"], variable: "--font-body" });h1, h2, h3, h4 {
font-family: "Fraunces", serif;
}
body {
font-family: "Inter", sans-serif;
}<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Fraunces:wght@400;600;700&family=Inter:wght@400;600;700&display=swap" rel="stylesheet">Pairings
Pick a pairing to preview it above. Click to switch.
How it works
Self-hosted fonts
Every family is downloaded and served from our own origin at build time via next/font: no request to Google, faster loads and no font flash.
Open source
Every typeface ships under the open SIL licence (OFL), free to use in your projects: on the web, in apps and in print.
Heading and body
The pairings are chosen for contrast and harmony: a face that catches the eye in headlines and one that keeps the reader through long copy.
Ready to copy
Copy next/font code for Next.js, plain CSS, or the Google Fonts <link>, and paste it straight into your project.
More free tools
Next step
Want this typography in a real site? We design and build websites and web apps with Next.js, Tailwind and Supabase.
Request a quote