Upload two fonts and see every glyph rendered side-by-side at the same em size. Spot rendering differences, weight mismatches, and missing characters.
Upload font A and font B
We render a sample string in both fonts at the same size and overlay the glyphs
Get an HTML preview showing per-glyph alignment and an overlay highlighting differences
0 bytes uploaded. Font Comparison Overlay runs entirely in your browser using opentype.js and the File API. Your fonts never leave your device.
This tool requires the Pro plan or higher.
Quick spot-check before swapping fonts: x-height differences, advance widths, kerning behaviour, missing characters in one font. Critical when migrating between web fonts.
Yes. Both glyphs render to the same canvas at the same em size, with one in red and the other in blue at 50% opacity. Overlap regions appear purple.
Default is the standard 'pangram + lowercase + numerals + punctuation' set. Customise via the textarea — useful for testing kerning pairs (AV, To, Wa) or specific brand text.
Drop a variable font (or static weight family) and see every weight rendered side-by-side in a sample string. Pick the right weight for headlines, body, and accents.
Open toolDrop a font and browse every glyph with name, Unicode codepoint, advance width, and live preview. Search by character, codepoint, or glyph name.
Open toolExtract every vertical metric from a font's OS/2, hhea, and head tables. Get a recommended line-height and CSS snippet for perfectly aligned typography.
Open tool