Webfont Coverage & Overlap Advisor
Paste a stylesheet and audit every @font-face rule. The advisor finds unicode-range declarations that fight each other, duplicate faces, missing font-display settings, and characters your page uses that no font actually contains.
Paste a stylesheet with @font-face rules to start the audit.
Questions about webfont coverage & overlap advisor
What is a unicode-range and why does it matter?
It tells the browser which characters a font file may be used for. When two faces claim the same characters the browser picks one of them silently, so a heading can end up in a different typeface than the body text without any error being reported.
Which font files can I drop in?
TrueType (.ttf) and OpenType (.otf) files. Their character map is read directly, so the tool can list the characters a font really contains. WOFF and WOFF2 files wrap the same tables in a compressed stream, so those cannot be read here.
How are the font files matched to the rules?
By file name, ignoring the extension. A stylesheet that references Inter-Regular.woff2 is matched with an Inter-Regular.ttf file you drop in, so you can check a source font against the rule that uses it.
Does the tool tell me what to change?
It reports the overlapping ranges and the characters that no font covers. Choosing which rule to keep or which extra character to add is a decision about your design, so the tool leaves it to you.
Is my stylesheet sent anywhere?
No. The CSS is parsed in the page and the font files are read with the browser's file API. Nothing is uploaded and nothing is stored.
Related tools
Other utilities on Utilith that pair well with this one.