Font pairs
Choose a heading font and a body font: a system stack that needs no download, a family already installed on this device, or a font file you load here. The sample sets Chinese and English side by side with a modular scale, line heights, letter spacing and measure you adjust live, tells you whether each font is really available on this device, and exports the pairing as CSS custom properties, JSON tokens and a PNG sample sheet. Nothing is downloaded from a font service and nothing leaves your browser.
Font pairs
- Runs on your deviceNo upload. Nothing you enter leaves your browser.
- Free, no accountNo sign-up, no limits set by us, nothing stored on our servers.
- FormatsOptional TTF, OTF, WOFF or WOFF2 font file in; CSS, JSON tokens and PNG sample sheet out (ZIP)
- Works onCurrent Chrome, Edge, Firefox and Safari, desktop and mobile.
How it works
- Pick the heading font and the body font: a system stack, an installed family by name, or a font file from this device.
- Set the base size, ratio, line heights, heading letter spacing, weight and measure; check the sample at desktop and phone width.
- Download the CSS, the tokens and the sample sheet, or all three as a ZIP.
Questions
Where do the fonts come from?
Only from your device. System stacks list fonts that ship with macOS, Windows, Linux, iOS and Android, with a generic fallback at the end. An installed family is used by name. A font file is loaded into this page with the browser's Font Loading API from your disk. Nothing is fetched from Google Fonts or any other service, and no font file is ever uploaded or written into an export.
How does the availability check work?
The tool measures a line of text in the chosen family against the three generic fallbacks; if the width never differs, the family is not installed here and the fallback is being shown. For a stack it names the first family that resolves on this device. The check runs on your device, so it says what you will see; visitors on other systems may get a different font from the stack, which is the point of a stack.
Does it detect missing Chinese glyphs?
Not automatically. The sample puts Chinese and English in the same font on purpose: if the Chinese line looks like a different face, the font has no Chinese glyphs and the browser fell back to a system font. The two Chinese stacks in the list are made of fonts that do cover Chinese.
What about variable fonts?
A loaded TTF or OTF is read for its variable axes (weight, width, optical size and any custom axis) and their ranges, shown next to the file. The heading weight box then accepts any value in the weight axis range. WOFF and WOFF2 files load and display, but their axes cannot be read because the tables are compressed.
What is in the export?
type.css holds custom properties for the two families, the base size, the scale as rem values, line heights, letter spacing and measure, plus rules for html, body, paragraphs and headings. type-tokens.json holds the same values with the font source and your licence note. sample-sheet.png is the sample drawn on this device at 1200 px wide with the fonts available here. The licence note is yours to write; the tool cannot check a font's licence and does not bundle font files.
Is anything uploaded?
No. The page loads a small script into your browser and every calculation runs on your device. You can check this yourself in the browser's network panel: after the page has loaded there are no upload requests. Closing the tab discards what you entered.
Do I need an account or to pay?
No. These basic tools are free, have no limits set by us and store nothing on our servers.
What does this page keep in my browser?
Nothing you open or type. While the tab is open, the tool pages keep a short list of the steps taken in it, in the tab's session storage: the step (page opened, started, succeeded, first success, used again or failed), the tool's name, the time, how many files were used and, for a failure, an error code; never a file name, the contents of a file or your text. It holds at most the latest 200 steps, and the browser deletes it when the tab closes. The page never sends it. Where a Report a problem button is shown, you can attach the last 20 steps to your report; nothing is attached unless you tick that box. In local storage the page keeps only choices you made: a Light or Dark theme until you choose System again, the language you picked with the EN / 中文 switch if it differs from your browser's language, and this tool in your recently used list if you switched that list on at the tools page.
Questions or problems
Found a problem or missing feature? Tell us. Please describe the steps; do not send confidential data.