shadcn.io is not affiliated with official shadcn/ui
Glyph Coverage Font File Upload Block for React
A text box whose characters are checked against a font's typed coverage, with missing glyphs marked in a stand-in serif preview and named in words, plus coverage meters per script and a fact list.
Installation
Overview
Find out which characters a font cannot set before you license it, with this font file upload panel for React with Base UI. It is the licence check of Glyphcase, a type foundry's trial desk, in two cells. Type or paste text into the Textarea and every character the font's typed coverage lacks is marked in a preview set in a stand-in serif, with the answer in words: "Not covered: S with caron, sharp s, Zhe". The other cell shows a Progress meter per script (Basic Latin, Latin-1, Latin Extended-A, Greek, Cyrillic, Punctuation), worked out from typed code point ranges and how many characters of your text use each, and a Data List of facts whose glyph count is the sum of those ranges. A File Upload strip takes your own font. For foundries, font pickers and any trial that checks a language before a sale.
FAQ
What stays local in the demo?
The coverage belongs to a typed sample font, Halden Serif, and is the same whatever you pick. A font file you choose is listed by name and size and never loaded, parsed or used to draw the preview, which is set in the page's serif stand-in. To wire it for real, read the font's cmap table on the server (or with a font parser) and replace the typed ranges with the real coverage.
How is a character judged?
Its code point is looked up in the typed ranges of each script. Spaces and line breaks need no glyph. Anything outside every range, such as a character from another script or an emoji, counts as not covered and is named by its code point (for example U+4E2D) unless it has a short name in the block.
What does the answer line say?
Each missing character once, in order of first appearance, by name, up to six and then "and N more". With nothing missing it says every character is covered. A count of missing and typed characters sits under it.
How are the percentages worked out?
As covered code points over the block's size, from the same ranges the check uses: Basic Latin is complete, Latin-1 lacks the sharp s, Latin Extended-A stops at U+015F, Cyrillic is empty. The glyph count in the facts is the sum of the covered code points.