FontX - Font Pairing & Type Scale Tool for Developers

Pick fonts by reading them, not by browsing specimens

FontX puts heading, body and code fonts side by side on a real article, a type scale and live UI, using your ColorX colors. Choose from 2,000+ open-source families, including Chinese fonts, then copy setup code for your stack.

How it works

  1. 01

    Choose a role, then a font

    Select Heading, Body or Code and pick from the catalog. Filter by category or search; each family previews in its own type.

  2. 02

    Read it in context

    Switch between an article, the type scale and real UI. Adjust weights and the scale ratio, or start from a curated pairing.

  3. 03

    Copy the setup

    Get Tailwind CSS, plain CSS, a Google Fonts link, next/font or Nuxt config, with only the weights you use.

Export formats

Tailwind CSS v4
Fontsource imports plus a theme block with font-sans, font-heading, font-mono and the text-* scale.
CSS
A Google Fonts import (or Fontsource for other families), CSS variables and base rules for body, headings and code.
HTML
Preconnect hints and a single Google Fonts stylesheet link.
Next.js
next/font/google loaders with CSS variables, ready for app/layout.tsx.
Nuxt
A families list for the Nuxt Fonts module, which self-hosts the files at build time.

FAQ

Where do the fonts come from?

The catalog is Fontsource: every Google Fonts family plus other open-source fonts. FontX loads only the weights you preview, from a public CDN.

Does it work with Chinese fonts?

Yes. Chinese fonts are split by character range, so the preview downloads only the characters on screen. Switch the sample text to 中文 to judge them properly.

Can I use these fonts commercially?

Almost all are released under the SIL Open Font License, which allows commercial use. Check the license of the specific family before shipping.

More tools

ColorX Tailwind & shadcn/ui theme generatorGradientX CSS and Tailwind gradients, blended in OKLCHImageX Compress and convert images to WebP, AVIF and moreCropX Crop to any ratio or size, and redactSvgX Optimize SVG and convert it to code or PNGRunX Paste HTML, React or Vue code and see it run