23 pairs. Tap one to try it.
High-contrast serif headings over a calm sans. A safe classic for blogs, portfolios and beauty brands.
elegant · editorial
Small batch, big flavour
We roast in small batches every Tuesday and ship on Wednesday, so your coffee arrives within a week of roasting. Bold looks like this.
A smaller heading
Body text at 14px, the size of captions and small print. If it still reads easily here, the pair works.
CSS
h1, h2, h3 {
font-family: "Playfair Display", Georgia, serif;
font-weight: 700;
}
body {
font-family: "Inter", system-ui, sans-serif;
font-weight: 400;
}
strong, b {
font-weight: 600;
}<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=Playfair+Display:wght@700&family=Inter:wght@400;600&display=swap" rel="stylesheet">
The link goes in your page's head; the @import goes at the very top of your CSS file. Both load only the weights shown, which keeps the page fast. All of these fonts are free to use, under the SIL Open Font License.
Free Font Pairing Tool by Hiyaly