How to overlay two fonts to check metric compatibility
- Step 1Upload the web font as A — Put the font that loads after the swap into slot A. It renders in red in the overlay — treat it as the target shape the fallback should approximate.
- Step 2Upload the candidate fallback as B — Add the fallback you're considering (an exported system font, or a lighter web-safe face) in the font B slot. Without a second file the tool errors with `Upload font B (the second font for comparison).`
- Step 3Set sample text that stresses width and height — Replace the default `The quick brown fox AaBb 0123` with a line of lowercase text (x-height) plus a long word or sentence (advance width) representative of your body copy.
- Step 4Run and study the overlay row — The third row stacks both at the same origin. Read vertical fringe as x-height mismatch and horizontal fringe as width mismatch. Tight blending across the whole line means a low-shift fallback.
- Step 5Cross-check the numbers — Once a fallback looks close, confirm with the actual metrics — run the font metrics analyser on both to read units-per-em and x-height, which you'll need to compute size-adjust and ascent-override.
- Step 6Record the chosen pairing — Save the HTML overlay (`compare-<A>-vs-<B>.html`) next to your font CSS as the visual justification for the fallback, so the next person who touches the stack understands the choice.
How to read the overlay for fallback fit
The third (overlay) row is where the compatibility signal lives. A = web font (red), B = fallback (blue).
| What you see in the overlay | What it means | Layout impact when the web font swaps in |
|---|---|---|
| Blue rises above / drops below the red | Fallback has a different x-height or cap height | Vertical reflow — line boxes change height, content shifts down |
| Blue trails to the right of red on a word | Fallback is wider per character | Line breaks move; text that fit now wraps (or vice versa) |
| Tight, even blend across the line | Metrics are close | Near-invisible swap — the low-CLS goal |
| A red glyph with no blue under it | Fallback lacks that character | That character will fall through to the next font in the stack |
What the overlay shows vs. what it can't
Use the overlay for the visual call, then a metrics tool for the numbers it doesn't produce.
| Question | Does this tool answer it? | Where to get the rest |
|---|---|---|
| Do the shapes/widths roughly match? | Yes — visually, via the overlay | This tool |
| Exact x-height and units-per-em | No | Font metrics analyser |
| The size-adjust / ascent-override % to use | No | Compute from the metrics numbers |
| Which characters the fallback is missing | Only as a visual gap | Coverage map |
| File size of each font | No | Glyph count & savings estimator |
Cookbook
Pairings to test when you're hunting a low-shift fallback. The overlay is the eyeball test; for the override percentages you'll write into @font-face, read the actual metrics with the metrics analyser, and confirm character coverage with the coverage map.
Web font vs. an exported system sans fallback
ExampleExport the system sans you'd name in the stack and overlay it against your web font. A tight blend predicts a clean swap; a wide blue fringe predicts reflow.
Font A: Inter-Regular.woff2 (web font) Font B: SystemSans-Regular.ttf (exported fallback) Sample text: the quick brown fox jumps over the lazy dog
Checking x-height match on body copy
Examplex-height drives perceived size. Sample lowercase-heavy text — if the blue sits clearly taller or shorter than the red, the fallback needs a size-adjust.
Font A: body-webfont.woff2 Font B: body-fallback.woff2 Sample text: reading comfort depends on x-height and spacing
Width-stress test for line-break stability
ExampleA full sentence reveals cumulative width drift. Watch where the blue word-ends fall relative to the red across the whole line.
Font A: ui-webfont.woff2 Font B: ui-fallback.woff2 Sample text: Subscribe to receive product updates every month
Serif web font vs. serif fallback
ExampleSerifs add width unpredictably. Overlay them to see whether a serif fallback holds the line length or blows it out.
Font A: Lora-Regular.woff2 Font B: Georgia-exported.ttf Sample text: Typography is the craft of endowing language with form
Confirming the fallback covers your punctuation
ExampleFallbacks sometimes lack typographic punctuation. Sample the marks your copy uses — a lone red mark means the fallback drops it.
Font A: brand-web.woff2 Font B: candidate-fallback.woff2 Sample text: “curly quotes,” em—dashes, and ellipses…
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.
Overlay shows tight blend but text still shifts live
Visual check onlyThe overlay confirms shape and width similarity at 32px but doesn't compute the size-adjust/ascent-override you actually need. A close overlay is necessary, not sufficient — read the real metrics and set the overrides to nail the swap.
You only uploaded the web font
Error: Upload font BThe tool needs both the web font and the fallback. With one file it throws Upload font B (the second font for comparison). Add the fallback in slot B.
Fallback is taller than the web font
Vertical blue fringeBlue rising above and dropping below the red means a larger x-height/line box in the fallback. Live, that reflows your paragraphs downward when the web font loads — the classic swap CLS you're trying to avoid.
Fallback is wider per character
Horizontal blue fringeBlue word-ends trailing right of the red show the fallback runs wider, so line breaks move on swap-in. This is exactly what size-adjust is meant to correct once you've measured it.
Comparing a system font you couldn't export
Not directly possibleThis tool overlays two uploaded font files; it can't render a fallback that lives only on the OS by name. Export or obtain a file of the fallback first, then overlay it. The overlay reflects the uploaded file, not the live system rendering.
Both fonts inlined make a heavy preview
Large HTMLEach font is base64-inlined (about +33% over raw bytes) into one HTML document. Comparing two large families produces a big file. Subset both to your body charset first for a lighter, faster overlay.
Fallback lacks a character the web font has
Lone red glyphA missing fallback glyph shows as font A's red glyph with no blue beneath it. Live, that character falls through to the next font in your stack — worth knowing before you commit the fallback.
Default pangram used instead of body copy
Less representativeThe quick brown fox AaBb 0123 won't reflect your real line lengths. Paste a representative sentence so the width comparison maps to your actual layout.
WOFF2 web font vs. TTF fallback
Works as-isMixed formats are fine; each side is inlined in its own format. The comparison is faithful — the browser renders both at the same 32px regardless of container format.
Either file over the tier limit
Error: exceeds per-job limitFree 5 MB, Pro 50 MB, Developer 1 GB, checked per file. Oversized fonts error before rendering — subset the heavier one or upgrade.
Frequently asked questions
Can this tool pick a fallback font for me?
No — it shows you, visually, how close a candidate fallback is to your web font. The choice and the override values are yours; the overlay just makes the metric divergence obvious.
Does it output the size-adjust percentage?
No. It produces a visual overlay only. To compute size-adjust or ascent-override you need the numeric x-height and units-per-em, which the font metrics analyser reports.
How do I read x-height mismatch in the overlay?
Look at vertical fringe: if the blue (fallback) extends above or below the red (web font) on lowercase letters, their x-heights differ — the main driver of vertical reflow on swap-in.
How do I read width mismatch?
Look at horizontal fringe: if the blue word-ends drift right of the red across a line, the fallback is wider per character and will move your line breaks when the web font loads.
Can I overlay a live system font like Arial?
Only if you provide a font file for it. The tool renders the two uploaded files; it can't reference a font by name from the OS, so export or obtain the file first.
Why both fonts at 32px instead of their natural sizes?
A fixed size is the whole point — it forces both into the same coordinate frame so the comparison reflects their intrinsic metrics rather than two independent default renderings.
What sample text should I use for a fallback check?
Lowercase-heavy body copy to judge x-height, plus a full representative sentence to judge cumulative width. Avoid the default pangram for a real decision.
Does it work with variable fonts?
It renders whatever the file presents by default. To compare specific instances or weights you'd freeze or pick them elsewhere; this tool compares the two files as uploaded.
What formats can I upload?
TTF, OTF, WOFF, and WOFF2 on either side, in any combination.
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 comparison faithful to how the font ships?
Yes — WOFF/WOFF2 are inlined in their compressed form and decompressed by the browser at render time, so what you see is what your users would render.
Where do I get the exact metrics this overlay can't show?
Run the font metrics analyser on each font for units-per-em, ascender, descender, x-height, and cap height — the numbers behind the visual overlay.
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.