Font inspector

What this font inspector does

Choose a font file and the tool parses its tables with opentype.js and shows the facts you need before adding it to a project: the real family name for your @font-face, the style and numeric weight, how many glyphs it contains, and the vertical metrics (units per em, ascender, descender). Below that, a live specimen rendered with the actual font — type any text and drag the size from 12px to 120px. WOFF2 files are decompressed in the browser first; nothing is uploaded.

How to use it

1. Click Choose a font file and pick a .ttf, .otf, .woff or .woff2.
2. Read the seven values in the results grid.
3. Click into the specimen, replace the sample text with your own headline or the tricky characters you care about (@, ß, →, digits) and move the Specimen slider to compare sizes.

What each value means

Field	Source table	What to do with it
Family	name (ID 1, English)	Use it verbatim as font-family in @font-face and in your CSS stack
Style	derived	”Semi Bold Italic” etc. — sanity-check that the file is the cut you think it is
Weight	OS/2.usWeightClass	Put this number in font-weight of the @font-face so the browser does not synthesize bold
Glyphs	maxp.numGlyphs	Rough language coverage: ~230 = basic Latin, 600+ = extended Latin, 1,000+ = Latin + Cyrillic + Greek, 10,000+ = CJK
Units/em	head.unitsPerEm	Scale for the metrics below; 1000 (PostScript heritage) or 2048 (TrueType)
Ascender	hhea.ascender	Height above baseline in font units
Descender	hhea.descender	Depth below baseline, negative

Weight classes

Value	Name	CSS keyword
100	Thin	—
200	Extra Light	—
300	Light	—
400	Regular	normal
500	Medium	—
600	Semi Bold	—
700	Bold	bold
800	Extra Bold	—
900	Black	—

If the file says 700 but you declare font-weight: 600 in @font-face, the browser still uses it for 600 and synthesizes a faux bold for 700 — the usual cause of “the bold looks smeared” bugs.

Reading the metrics

Vertical metrics explain why two fonts at the same font-size take up different amounts of space. With units per em 2048, ascender 1900 and descender -500:

natural line height = (1900 + 500) / 2048 = 1.17

That is what line-height: normal resolves to for this font. A font with ascender 1536 and descender -512 at the same upm gives 1.0 and will look cramped next to it. Knowing the numbers lets you pick an explicit line-height instead of relying on normal, and feed the override descriptors when matching a fallback font:

@font-face {
  font-family: "Inter Fallback";
  src: local("Arial");
  ascent-override: 93%;      /* ascender / unitsPerEm */
  descent-override: 24%;     /* |descender| / unitsPerEm */
  size-adjust: 107%;
}

This is how you make the fallback occupy the same space as the web font and avoid layout shift while it loads. Other metrics such as x-height and cap height live in the OS/2 table and are not shown here.

Typical use cases

• Identify a mystery file. font.woff2 from an old project — which family and weight is it? Drop it in.
• Verify a conversion. After converting to WOFF2, confirm the glyph count and family are unchanged.
• Check language coverage before committing to a font: if the glyph count is under 300, it will not render Vietnamese or Polish diacritics.
• Preview before buying or installing. Type your real headline at 96px and see the actual shapes rather than a foundry’s curated sample.

Related tools and snippets

• Font converter — turn the inspected TTF/OTF into WOFF2 for the web.
• CSS unit converter — convert the px size you liked in the specimen to rem or em.
• Text stats — count characters in your copy to estimate how much of the glyph set you actually use.
• Truncate multiline text snippet — line clamping depends on an explicit line-height, which the metrics here help you choose.
• Font tools in the browser — background on both font tools.