Font Viewer

Drop in a .ttf, .otf, .woff, or .woff2 file and see exactly how it looks before you use it. The viewer registers the font with the browser's FontFace API, then renders a pangram, your own sample text, and a full glyph grid — A–Z, a–z, and 0–9 — at several sizes. It also reads the OpenType name table to show the family, style, full name, version, and PostScript name. The font is loaded from a local blob and never uploaded, so you can vet licensed or unreleased fonts privately.

How to use the Font Viewer

Choose a font file in any common format — TrueType (.ttf), OpenType (.otf), or the web-compressed .woff and .woff2. The viewer loads it, registers it under an internal name, and renders the previews once the browser confirms the font is ready. Type into the Sample text box to see your own words in the typeface, and drag the Preview size slider to scale the headline sample up or down.

Below the live sample you get a metadata panel read straight from the font's name table: family name, subfamily (the style, such as Regular or Bold), full name, version, and PostScript name when present. Under that is a glyph grid showing the uppercase, lowercase, and digit characters in the font, plus the pangram repeated at a ladder of sizes so you can judge readability at body, subhead, and display scales. Everything runs in your browser using the FontFace API and a DataView parse of the file header, which means the example button and any font you load work offline and nothing about the file leaves your machine.

Font formats, the name table, and glyphs

Desktop and web fonts almost all descend from the OpenType specification, which itself grew out of Apple's TrueType. A font file is a container of tables, each holding one kind of data: the glyph outlines, the character-to-glyph mapping, kerning, hinting, and naming. The headline difference between TTF and OTF is how the outlines are drawn. TrueType (usually .ttf) stores glyphs as quadratic Bézier curves, while OpenType with PostScript outlines (usually .otf, internally a CFF table) uses cubic curves. Both render identically on a modern screen; the distinction matters mostly to type designers and to a few older programs.

WOFF and WOFF2 are not different outline formats but wrappers built for the web. WOFF takes an existing TrueType or OpenType font and compresses its tables; WOFF2 does the same with the much stronger Brotli algorithm, typically cutting file size by a further thirty percent or more. That smaller payload is why WOFF2 is the format you serve through @font-face in production — fewer bytes over the wire means text paints sooner. This viewer decodes all four because they share the same underlying table structure once unpacked.

Inside every font is the name table, a list of human-readable strings keyed by ID: family name is ID 1, the subfamily or style is ID 2, the full name is ID 4, the version string is ID 5, and the PostScript name is ID 6. Reading these tells you what a font calls itself, independent of the filename. It is also worth separating two ideas that sound the same: a character is an abstract symbol with a Unicode code point, while a glyph is the concrete shape the font draws for it. One character can map to several glyphs (alternates, ligatures), and one glyph can serve several characters, which is why "does this font support my language" is really a question about which glyphs and mappings the file contains.

Common use cases

  • Vetting a download. Confirm a font actually looks the way the specimen promised before adding it to a project.
  • Checking glyph coverage. Scan the A–Z, a–z, and 0–9 grid to see which characters the file draws.
  • Reading the real name. Pull the family, style, and version from the name table when the filename is cryptic.
  • Comparing weights. Load several files in turn to compare Regular, Medium, and Bold at the same sample size.
  • Private review. Preview a licensed or unreleased typeface locally without uploading it to a web service.

Frequently asked questions

Which font formats can it preview?
TrueType (.ttf), OpenType (.otf), and the web formats WOFF and WOFF2. All four share the same internal table structure once decoded, and the browser FontFace API handles the rendering for each.

Where does the metadata come from?
It is read from the font name table by parsing the file header with a DataView: family (ID 1), subfamily/style (ID 2), full name (ID 4), version (ID 5), and PostScript name (ID 6). If a field is missing from the file it is simply omitted.

What is the difference between TTF and OTF?
Mainly the outline format. TTF stores quadratic Bezier curves; OTF commonly stores PostScript/CFF cubic curves. Both display the same on modern systems. WOFF and WOFF2 are compressed wrappers around either kind for faster web delivery.

Why does only A–Z, a–z, and 0–9 show in the grid?
The grid previews the basic Latin letters and digits as a quick legibility and coverage check. The sample-text box lets you type any other characters — including accented letters or symbols — to test whether the font draws them.

Is my font uploaded anywhere?
No. The file is read into a local blob URL and registered with the browser FontFace API entirely client-side. Nothing is transmitted to any server, so licensed or pre-release fonts stay on your device.