How to compare two variable-font files in one overlay
- Step 1Upload the first variable file as A — Drop your variable font (or its frozen static instance) into slot A. It renders in red at its default instance.
- Step 2Upload the second file as B — Add the other file in slot B (blue). Both are required; one alone throws `Upload font B (the second font for comparison).`
- Step 3Set a glyph-revealing sample — Replace the default with text that includes the letters where families differ most — a, g, R, Q, &, plus numerals — alongside a normal sentence for width.
- Step 4Run and compare defaults — Both files render at their default axis position. Read the overlay: blended where the defaults align, fringed where weight, width, or shape diverge.
- Step 5Verify a freeze — If A is a variable font and B is a static you froze from it, a fringe-free overlay confirms the freeze matched the default instance. Any fringe means the freeze landed at a different position than expected.
- Step 6Inspect axes separately if needed — Because this tool only shows the default render, use a dedicated variable-axis inspector to read each file's axis min/default/max and named instances when you need more than the default comparison.
What this overlay does and doesn't do for variable fonts
It compares two files at their default instance — nothing more, nothing less.
| Capability | Supported? | If not, where |
|---|---|---|
| Overlay two files at default render | Yes | This tool |
| Pin/choose an axis value for the comparison | No | Freeze an instance first, then overlay the frozen file |
| Sweep the weight axis of one font | No | Use a weight-progression viewer |
| Read axis ranges and named instances | No | Use a variable-font axis inspector |
| Compare the SAME family at two instances | Only by freezing each instance to a file first | Freeze, then overlay |
Reading the overlay for two variable fonts
A = file 1 (red), B = file 2 (blue), both at default instance, 32px.
| Overlay appearance | Meaning |
|---|---|
| Clean even blend | Defaults match in weight, width, and shape |
| Uniform fringe on every stroke | Different default weight |
| Horizontal fringe per word | Different default width / advance |
| Fringe only on certain letters | Different glyph design (a, g, R, Q, &) |
| Red-only glyph | File B lacks that character |
Cookbook
Comparison setups for variable-font files. Remember the overlay shows each file's default instance only — to compare a single family across instances, freeze each instance to its own file first, then overlay the two frozen files. For per-file metrics use the metrics analyser, for character coverage use the coverage map, and to browse individual glyphs use the glyph inspector.
Frozen static vs. its source variable font
ExampleConfirm the instance you froze matches the variable default. A clean blend is a passing freeze; fringe means the freeze sat at a different position.
Font A: Inter-var.woff2 (variable, default instance) Font B: Inter-Regular-frozen.ttf (frozen static) Sample text: Same Regular? agRQ& 0123 the quick brown fox
Two competing variable families
ExampleOverlay the defaults of two candidate families on your brand string to judge which silhouette fits before you commit.
Font A: family-one-var.woff2 Font B: family-two-var.woff2 Sample text: Build something people love
Letterform-difference probe
ExampleSample the letters where designs diverge most. Fringe concentrated on a, g, R, or Q tells you the families have different character.
Font A: candidate-a-var.woff2 Font B: candidate-b-var.woff2 Sample text: a g R Q & @ 4 7 — design tells
Default-width comparison for line length
ExampleEven at the same default weight, two variable families can run different widths. A full sentence shows the cumulative drift.
Font A: var-a.woff2 Font B: var-b.woff2 Sample text: Pricing that scales with your team, not against it
Two frozen instances of the same family
ExampleTo compare, say, Medium vs. SemiBold of one variable family, freeze each to its own file first, then overlay the two frozen files here.
Font A: Family-Medium-frozen.ttf Font B: Family-SemiBold-frozen.ttf Sample text: Which weight reads better at body size?
Edge cases and what actually happens
Every row below was probed against the live API. Some documented requirements (alphabetical axis order, numerical tuple order) are not actually enforced in practice — useful to know if you've been blaming the wrong thing for a 400.
You expect to pick an axis value to compare
Not supportedThis tool renders each file at its default instance and offers no axis controls. To compare a specific weight or width, freeze that instance to a static file first, then overlay the frozen file. The overlay always reflects the default render of whatever you upload.
Comparing one variable font at two weights
Requires two filesThere's no way to render the same uploaded file at two different positions here. Freeze each instance you want to compare into its own file, then overlay the two frozen files.
Frozen static doesn't match the variable default
Fringe in overlayIf A (variable, default) and B (your frozen static) show fringe, the freeze landed at a different axis position than the default. Re-freeze at the intended values — a correct freeze of the default instance blends cleanly.
Only one file uploaded
Error: Upload font BBoth files are required. One alone throws Upload font B (the second font for comparison).
Two large variable fonts inlined
Large HTML outputVariable fonts carry their full axis data, and both are base64-inlined (about +33% each) into one preview. Two big variable families make a heavy file; freeze or subset first for a lighter overlay.
Default instances differ in weight
Uniform fringeIf the two files default to different weights, every stroke shows fringe. That's a true difference in their default render — not a bug. Freeze both to the same target weight if you want a like-for-like comparison.
One file lacks a character the other has
Red-only or blue-only glyphCoverage differences between two variable families show the usual way: a lone red (or blue) glyph where the other file has none. Confirm exact coverage with the coverage map.
Default pangram used
Misses letterform tellsThe default sample won't stress the distinctive letters (a, g, R, Q, &). Sample those deliberately to see where two families actually differ in design.
Variable WOFF2 vs. static TTF
Works as-isMixed format and mixed variable/static are fine — each side renders at its default instance and is inlined in its own format. The browser handles both at 32px.
A file over the tier limit
Error: exceeds per-job limitPer-file limits: 5 MB Free, 50 MB Pro, 1 GB Developer. Oversized files error before rendering.
Frequently asked questions
Can I pin an axis value (like wght 500) for the comparison?
No. The overlay renders each uploaded file at its default instance and has no axis controls — the only option is sample text. To compare a specific weight, freeze that instance to a static file first, then overlay it.
Can I compare one variable font at two different weights?
Not directly — the tool can't render the same file at two positions. Freeze each weight to its own static file, then overlay the two frozen files here.
How do I verify a frozen static matches the variable default?
Overlay the variable font (A) against your frozen static (B). A fringe-free blend confirms the freeze matched the default instance; any fringe means it landed elsewhere.
What renders when I upload a variable font?
Its default instance — the axis values marked default in the font's fvar table. The overlay always shows that default render, never a custom position.
How do I see weight-axis differences?
A difference in the two files' default weights shows as a uniform fringe on every stroke. For sweeping one font's full weight range, use a dedicated weight-progression viewer instead.
Where do I read each font's axis ranges and instances?
This tool doesn't report them. Use a variable-font axis inspector for axis min/default/max and named instances, and the metrics analyser for vertical metrics.
Can I overlay a variable WOFF2 against a static TTF?
Yes — mixed formats and mixed variable/static are supported. Each side renders at its default instance at 32px.
What sample text best reveals family differences?
Distinctive letters — a, g, R, Q, & — plus numerals and a normal sentence for width. The default pangram won't stress the letterforms that distinguish families.
Will two large variable fonts produce a huge file?
Possibly — both are base64-inlined into one HTML document (about +33% each), and variable fonts carry full axis data. Freeze or subset before overlaying if the preview is heavy.
Does the tool change either font?
No — it renders both for comparison only. The output is an HTML overlay, not a modified or instanced font file.
What tier and size limits apply?
Pro tier minimum; per-file limits are 50 MB on Pro and 1 GB on Developer, checked separately for each of the two files.
Is the default-only render a limitation I should plan around?
Yes — design your comparison so the instances you care about are the defaults of the files you upload, which usually means freezing the desired instances to files first.
Privacy first
Every JAD Font tool runs entirely in your browser using opentype.js and the wawoff2 WASM Brotli encoder. Your fonts never leave your device — verified by zero outbound network requests during processing.