How to compare two web fonts before swapping the old one out
- Step 1Upload your current font as A — Drop the font you're shipping today into the first slot — TTF, OTF, WOFF, or WOFF2 all work. This is the baseline that renders in **red** in the overlay row.
- Step 2Upload the candidate font as B — The tool requires a second file — add your replacement font in the font B slot. Without it you'll get the error `Upload font B (the second font for comparison).` B renders in **blue** in the overlay.
- Step 3Replace the sample text with your real string — The Sample text field defaults to `The quick brown fox AaBb 0123`. Clear it and paste the exact words that have to fit — a button label, a navigation item, a price like `$1,299.00`, or your product name.
- Step 4Run the comparison — Both fonts are inlined as base64 data URIs into one HTML document and rendered at 32px. You get three rows: font A alone, font B alone, and the red/blue overlay.
- Step 5Read the overlay fringe — Scan the third row. Pure blended colour = the glyphs sit on top of each other. A red edge means font A is wider or taller there; a blue edge means font B is. A lone red glyph with no blue under it means B is missing that character.
- Step 6Save or screenshot the preview for the review — Download the HTML (`compare-<A>-vs-<B>.html`) to attach to a ticket, or screenshot the overlay row to drop into the PR description so reviewers see the metric shift, not just a diff of the CSS.
What you get for each font in the preview
The tool produces an HTML document with these three rows. Both fonts are rendered at a fixed 32px / line-height 1.2 so they share a coordinate system.
| Row | Font shown | Colour / style | What it tells you |
|---|---|---|---|
| Row 1 (A) | Your sample in font A only | White, full opacity | Baseline rendering of the font you ship today |
| Row 2 (B) | Your sample in font B only | White, full opacity | Rendering of the candidate replacement |
| Row 3 (overlay) | A and B stacked, top:0/left:0 | A = red #ef4444, B = blue #3b82f6, both 70% opacity, mix-blend-mode: screen | Where glyphs align (blend) vs. where they diverge (coloured fringe) |
Inputs, options, and limits this tool actually has
Font Comparison Overlay is a Pro-tier, two-file tool. There is exactly one option.
| Aspect | Value | Notes |
|---|---|---|
| Files required | Two (font A + font B) | Missing B throws Upload font B (the second font for comparison). |
| Accepted formats | TTF, OTF, WOFF, WOFF2 | Checked by extension; the same set on both sides |
| Only option | sampleText (textarea) | Default The quick brown fox AaBb 0123; trimmed before rendering |
| Per-file size limit | Free 5 MB · Pro 50 MB · Developer 1 GB | Each file is checked separately against your tier limit |
| Minimum tier | Pro | This comparison tool is gated above the free tier |
| Output | HTML preview (inlined base64) | Not a downloadable font; nothing about either font is modified |
Cookbook
Concrete swap scenarios and the exact sample strings that expose the differences worth catching. If you need numeric metrics rather than a visual overlay, run the font metrics analyser on each font; to confirm the candidate even covers your characters, use the coverage map; and to estimate which file is heavier, see the glyph count and savings estimator.
Swapping a paid font for a free Google Font
ExampleYou're replacing a licensed display font with a free alternative to cut costs. Compare them on the actual headline so you can see whether the cheaper option holds the brand feel and the same line length.
Font A: BrandDisplay-Bold.woff2 (current, paid) Font B: Fraunces-Bold.woff2 (candidate, free) Sample text: Built for the way you actually work.
Testing whether a swap reflows your nav bar
ExampleAdvance-width differences are what break layouts. Use the exact, space-separated nav labels — if B is wider, the blue fringe trails to the right of the red and you know the nav will wrap.
Font A: current-ui.woff2 Font B: candidate-ui.woff2 Sample text: Home Products Pricing Docs Contact
Comparing a WOFF2 you ship against a TTF you were sent
ExampleNo need to convert first — the tool accepts mixed formats. Drop the production WOFF2 in A and the designer's TTF in B and compare directly.
Font A: Inter-Regular.woff2 Font B: Inter-Regular.ttf (from the designer) Sample text: AaBbCc 0123 the same Inter? prove it.
Checking numerals before swapping a fonts on a dashboard
ExampleTabular vs. proportional figures wreck aligned tables. Sample a column of digits — if the blue digits drift out of step with the red, the new font's numerals aren't tabular.
Font A: dashboard-current.woff2 Font B: dashboard-candidate.woff2 Sample text: 1111 8888 10,250.00 9,999.99
Confirming the replacement has your accented characters
ExampleIf B is missing a glyph, you'll see a red glyph in the overlay with no blue underneath it. Sample the accents your content uses before you commit the swap.
Font A: current-latin.woff2 Font B: candidate-latin.woff2 Sample text: café naïve Zürich São Paulo €£¥
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 upload only font A and run
Error: Upload font BThis is a two-file tool. With only A present it throws Upload font B (the second font for comparison). Add a second font in the B slot — there is no single-font mode here. To preview one font alone, use a single-font previewer instead.
Font B is missing a character that font A has
Shows as a lone red glyphThe overlay doesn't draw a tofu box for the missing glyph in the way a coverage report would — it simply renders nothing for B at that position, so you see font A's red glyph with no blue glyph stacked under it. That gap is your signal. To enumerate exactly which codepoints are missing, run the coverage map.
You expect a literal purple where glyphs overlap
Blended, not flat purpleThe overlay uses mix-blend-mode: screen at 70% opacity, so overlapping red and blue lighten toward a pinkish blend rather than a flat purple swatch. Read it as 'aligned where it blends, fringed where it doesn't' — it is a visual cue, not a pixel-perfect diff score.
Two fonts with very different x-heights
Vertical fringeBoth fonts render at the same 32px and line-height 1.2, anchored at the same top-left. A font with a larger x-height shows its colour above and below the other's — exactly the metric shift that reflows your paragraphs. This is the comparison working as intended.
Uploading two large WOFF2 files
Large HTML outputBoth fonts are inlined as base64 data URIs in the single HTML document, and base64 adds about 33% over the raw bytes for each font. Two 40 MB fonts produce a very large preview file. Comparing display weights or subset fonts keeps the output light.
A WOFF or WOFF2 file is dropped in
Embedded as-isWOFF and WOFF2 are inlined in their compressed form with the matching font/woff or font/woff2 MIME type — the tool does not decompress them to TTF first. The browser handles decompression at render time, so the comparison is faithful to what ships.
Same font uploaded to both A and B
Fully blended overlayIdentical fonts produce a near-uniform blended overlay with no fringe — a useful sanity check that the tool is rendering both at the same coordinates. Any fringe you see in that case comes from differing weights or instances inside the two files, not from the renderer.
Sample text left at the default pangram
Works, but less usefulThe default The quick brown fox AaBb 0123 exercises a broad alphabet but not your real layout. For a swap decision, replace it with the actual string that has to fit — the comparison is only as honest as the text you feed it.
Pasting an emoji or CJK sample
Renders what the fonts containThe tool renders whatever both fonts can draw at 32px. If neither web font carries the glyph, the browser falls back to a system font for that character in both rows, which is not a meaningful comparison. Keep the sample within the scripts both fonts actually cover.
File exceeds your tier's size limit
Error: exceeds per-job limitEach file is checked separately: 5 MB on Free, 50 MB on Pro, 1 GB on Developer. An oversized file throws before rendering. Subset or convert the heavier font first, or upgrade the tier.
Frequently asked questions
Does this tool change or output a new font file?
No. It only renders both fonts you upload into an HTML preview. Neither font's bytes are modified, subset, or converted — the output is the comparison HTML, not a font you download and ship.
How are the two fonts aligned for the overlay?
Both render at a fixed 32px font-size and 1.2 line-height, absolutely positioned at the same top-left corner. Font A is drawn in red, font B in blue, each at 70% opacity, so they share an exact coordinate system.
Why isn't the overlap showing as solid purple?
The overlay uses CSS mix-blend-mode: screen. Screen blending lightens overlapping colours rather than mixing them to a flat purple. Where glyphs align you get a uniform blend; where they diverge you get a red or blue edge.
Can I compare a TTF against a WOFF2?
Yes. Either slot accepts TTF, OTF, WOFF, or WOFF2 independently, so you can drop your production WOFF2 in A and a designer's TTF in B and compare them without converting either one first.
What's the single option I can change?
Just the Sample text. It defaults to The quick brown fox AaBb 0123 and is trimmed before rendering. There are no colour, size, or weight controls — the red/blue/32px scheme is fixed.
Will it tell me which characters font B is missing?
Not as a list. A missing glyph in B simply shows as a red font-A glyph with no blue underneath. For an exact codepoint-by-codepoint missing-glyph report, run the coverage map on the candidate font.
Does it measure x-height or cap height numerically?
No — it's a visual overlay, not a metrics readout. To get numeric units-per-em, ascender, x-height and cap height, run the font metrics analyser on each font and compare the numbers.
Why does it need two files?
It's a comparison tool by design. If only one file is present it throws Upload font B (the second font for comparison). Drop a font in the second slot to proceed.
What tier do I need?
Pro. The comparison overlay is gated above the free tier. File-size limits then apply per file: 50 MB on Pro and 1 GB on Developer.
How big can each font be?
5 MB per file on Free (though the tool itself needs Pro), 50 MB on Pro, and 1 GB on Developer. Each of the two files is checked against your limit separately.
Can I save the comparison to share with my team?
Yes — the output is a standalone HTML file with both fonts inlined, so you can download compare-<A>-vs-<B>.html, reopen it offline, or screenshot the overlay row into a pull request.
Is this the right tool for previewing one font's weights?
No. This tool compares two different fonts. To step through the weights of a single variable or static family, use a weight-progression viewer instead; this overlay is for A-vs-B decisions.
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.