Why does the preview use fallback fonts?

Loading all Google Fonts inline would be slow and against the no-network ethos of EasyFileKit. The preview uses the named family with a web-safe fallback so you see the structure; importing the actual Google Font in your project renders the real typeface.

How do I load the fonts in my project?

Add a to fonts.googleapis.com for the two families, or install the @fontsource/ packages. The copied CSS already names the family correctly so it'll pick up the loaded font automatically.

Are these pairings accessibility-tested?

The pairings favor high-contrast, well-hinted families that render cleanly at small sizes. Always test your real copy at your real sizes — especially the body font at 14–16px.

Can I request a new pairing?

The collection reflects the most popular Google Font pairings. If a widely-used one is missing, drop us a line via the Contact page and we'll add it.

Do the CSS variables work with Tailwind?

Yes — drop the :root variables into your global CSS, then reference them in tailwind.config via `fontFamily: { heading: 'var(--font-heading)', body: 'var(--font-body)' }`.

Is any data sent to a server?

No. Search, selection and copy all happen locally in your browser. The Google Font import only happens when you add it to your own project.

Font Pairing

Browse curated heading + body font pairings and copy the font-family stack.

100% private — no uploads Design & CSS ToolsFree & unlimited Read tutorial

See how it works

Watch a quick simulation of this tool in action — no file needed.

How to use Font Pairing

Follow these steps — everything happens instantly in your browser.

1
Step 1. Browse the eight curated pairings in the sidebar.
2
Step 2. Search by mood (serif, mono, friendly…) or font family name.
3
Step 3. Click a pairing to load its live preview card.
4
Step 4. Copy the CSS variables block (--font-heading + --font-body) into your project.
5
Step 5. Import the named families from Google Fonts or @fontsource to render them.