How to spot missing glyphs when comparing two fonts
- Step 1Pick a trusted reference as A — Use a font you know covers your content (e.g., a broad system or web font you've shipped) as font A — it renders in red and acts as the 'should be present' baseline.
- Step 2Add the candidate as B — Drop the font you're evaluating in slot B (blue). Both files are required; one alone throws `Upload font B (the second font for comparison).`
- Step 3Paste the exact characters you're worried about — Replace the default sample with the real string: customer names with accents, prices with currency symbols, and the punctuation your CMS produces (curly quotes, em dashes, ellipses).
- Step 4Run and scan for red-only glyphs — In the overlay row, any position where you see red with no blue under it is a character the candidate is missing. Blended positions are covered by both.
- Step 5Confirm and enumerate the gaps — For a definitive, codepoint-level list of what the candidate lacks across all Unicode blocks, run the candidate through the coverage map.
- Step 6Decide and document — Reject the candidate if it drops characters your content needs, or accept it and save the overlay HTML as the evidence that it covers your real string.
How coverage gaps appear in the overlay
Read the third (overlay) row. A = trusted reference (red), B = candidate (blue).
| What you see | Interpretation | Action |
|---|---|---|
| Blended glyph | Both fonts have the character | Covered — no action |
| Red glyph, no blue | Candidate is missing that character | Candidate will tofu/fall back — reject or fix |
| Blue glyph, no red | Reference lacks it but candidate has it | Reference isn't a complete baseline for that character |
| Both missing (system fallback) | Neither font has it; browser uses a system font | Not a real comparison — stay within scripts both cover |
Character classes worth sampling on purpose
Specimens rarely show these, yet they're where candidate fonts most often fall short.
| Class | Sample characters | Why it bites |
|---|---|---|
| Currency | € £ ¥ ₩ ₽ ₹ | Pricing pages need the right symbol; many fonts ship only $ |
| Smart punctuation | “ ” ‘ ’ — – … | CMSes auto-curl quotes and dashes; straight-only fonts tofu |
| Accented Latin | é ñ ü ć ş ă | User names and place names break without latin-ext coverage |
| Math & arrows | × ÷ − → ≤ ≥ | Dashboards and docs surface these in body text |
Cookbook
Sampling strategies that flush out a candidate font's coverage gaps against a trusted reference. When the overlay flags a gap, get the exact codepoint list from the coverage map, browse individual glyphs with the glyph inspector, and check the metadata that explains the gap with the metadata extractor.
Currency coverage for an international pricing page
ExampleOverlay your trusted font against the candidate on a row of currency symbols. Red-only symbols are the ones the candidate can't draw.
Font A: trusted-ui.woff2 (reference) Font B: candidate.woff2 Sample text: $ € £ ¥ ₩ ₽ ₹ ₦ ₱
Smart-quote and dash punctuation
ExamplePaste the typographic punctuation your CMS produces. A straight-quote-only candidate shows red-only curly marks.
Font A: reference.woff2 Font B: candidate.woff2 Sample text: “Ready?” — she said, ‘almost’… 1–3 pm
Accented names from your real user list
ExampleUse actual names with diacritics. Each red-only character is a user whose name will tofu in the candidate font.
Font A: reference.woff2 Font B: candidate.woff2 Sample text: Björn García Nguyễn Łukasz Ayşe
Math and symbol coverage for a docs site
ExampleOverlay on the operators and arrows your documentation uses. Missing ones appear red-only.
Font A: docs-reference.woff2 Font B: docs-candidate.woff2 Sample text: a ≤ b × c → d, ∑x ≠ ∞
Brand mark plus tagline coverage
ExampleSome display fonts cover uppercase but drop punctuation or numerals. Sample your full lockup string to be sure.
Font A: reference.woff2 Font B: display-candidate.woff2 Sample text: ACME™ — since 1998, est. © you
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.
Candidate missing a character the reference has
Red-only glyphThis is the intended signal: the reference's red glyph appears with no blue glyph stacked under it. That character will fall through to a fallback or render as tofu in the candidate font on your page.
Both fonts lack the character
System fallback, no signalIf neither font carries a glyph, the browser substitutes a system font for that character in both rows, so the overlay won't flag a gap. Keep your sample within scripts at least one of the two fonts actually covers, and verify true coverage with the coverage map.
You uploaded only the reference font
Error: Upload font BThe comparison needs both files. One alone throws Upload font B (the second font for comparison). Add the candidate in slot B.
Reference font also has gaps
Blue-only glyphs appearIf your 'trusted' reference is missing something the candidate has, you'll see blue with no red. That means your baseline isn't complete for that character — pick a broader reference for an honest 'is the candidate missing anything' test.
Default pangram used
Hides most gapsThe default The quick brown fox AaBb 0123 is basic Latin only and won't reveal currency, accent, or punctuation gaps. This tool's coverage value comes entirely from sampling your real, edge-case characters.
You want the exact codepoint list
Not produced hereThe overlay shows gaps visually but doesn't list codepoints. For a per-Unicode-block report of exactly what each font covers, run the coverage map on the candidate.
Subtle near-miss glyphs
Both render, slight fringeWhen both fonts have a character but draw it differently (e.g., a different style of currency symbol), you see a blend with fringe, not a red-only glyph. That's a style difference, not a missing glyph — don't mistake it for a coverage gap.
Very long sample string
Overflows the 32px rowLong samples can run past the preview width since text doesn't wrap in the fixed-height overlay row. Test characters in smaller batches so every glyph stays visible.
Two large fonts
Large HTML outputBoth fonts are base64-inlined (about +33% each). Two big multilingual fonts make a heavy preview; subset both to the script you're testing for a faster file.
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 — subset or upgrade.
Frequently asked questions
How does a missing glyph look in the overlay?
You'll see the red reference glyph with no blue candidate glyph beneath it. That position is a character the candidate font can't draw and will fall back or tofu on your page.
Does this give me a list of missing codepoints?
No — it's a visual check. For an exact, per-Unicode-block list of which characters a font covers, run the coverage map on the candidate font.
Why use a reference font instead of checking one font alone?
The reference (red) defines 'should be present.' A red-only glyph then unambiguously means the candidate is missing it. Without a reference you'd be guessing what the candidate ought to cover.
What if both fonts are missing the character?
The browser substitutes a system font for that character in both rows, so the overlay shows no gap. Sample within scripts at least one font covers, and confirm true coverage with the coverage map.
What characters should I deliberately test?
Currency symbols, smart quotes and dashes, accented names, and math/arrow symbols — the long-tail characters specimens skip and candidate fonts most often drop.
Can I overlay a WOFF2 reference against a TTF candidate?
Yes. Any combination of TTF/OTF/WOFF/WOFF2 works across the two slots.
Why does my sample run off the edge?
The overlay row has a fixed height and doesn't wrap, so very long samples overflow. Test characters in smaller batches.
Does this modify either font?
No. It renders both for comparison only; the output is an HTML overlay, not a modified font.
Can I inspect a specific missing glyph more closely?
Use the glyph inspector to browse individual glyphs in a font with their names and codepoints once the overlay tells you roughly where the gap is.
What tier and file sizes apply?
Pro tier minimum; per-file limits are 50 MB on Pro and 1 GB on Developer, checked separately.
Will a style difference look like a missing glyph?
No — if both fonts have the character but draw it differently you get a blended glyph with fringe, not a red-only glyph. Red-only specifically means absent in the candidate.
Is the default sample text good enough?
No — it's basic Latin and hides most gaps. Replace it with your real edge-case characters; that's where this tool earns its keep.
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.