Guide

What it does

Font Pairing Preview lets you combine heading and body fonts and see them on realistic article, landing, and UI layouts before adding them to your project. Browse the full Google Fonts catalog — fetched at build time and shipped as a static JSON file — alongside system font stacks that need no network request. Adjust weights, sizes, and spacing, then export CSS variables and link tags; everything except Google Font files runs locally in your browser.

When to use it

Choosing typography for a new marketing site, blog, or product dashboard
Comparing Google Font pairings side by side without switching browser tabs
Exporting CSS variables and Google Fonts link tags for design token files
Sharing font choices with teammates via a URL-encoded configuration
Previewing hierarchy on article, landing, and UI card templates before handoff

How to use it

Pick heading and body fonts from the catalog or apply a curated pairing preset.
Switch preview templates — Article, Landing, or UI card — to match your use case.
Adjust font weights, sizes, and letter spacing until the hierarchy feels balanced.
Toggle between Google Fonts and system stacks depending on performance needs.
Copy CSS variables, the full snippet with Google Fonts link tag, or share the URL.

Tips

The complete Google Fonts catalog is available offline in the picker because it is fetched at build time — only fonts you select load from Google at runtime.
Limit active Google Font families to two or three to keep page weight reasonable in production.
Use the UI card template to judge small-size legibility for labels and metadata, not just headings.
System font stacks need zero network requests — great for dashboards where speed matters most.

FAQ

Are fonts sent to PixelMetrik?

No. Google Fonts load directly from Google when you select them. Your pairing state stays in the browser or share URL.

Does it include every Google Font?

Yes. The full Google Fonts catalog is fetched at build time and shipped as a static JSON file. Only the fonts you select are loaded from Google at runtime.

Can I use system fonts only?

Yes. Choose fonts from the System category — no external network request is made.

Can teammates reopen my pairing?

Yes. Share the URL — it encodes your font selections, weights, and template choice.

Read the full help article →