Font Viewer
Open any TTF, OTF, WOFF or WOFF2 font to preview it with your own text, see it at every size, browse every glyph it contains and read its name, version, license and metrics, all without installing the font.
Tables in this font
How to use the Font Viewer
- Drop one or more font files onto the box or click it to choose TTF, OTF, WOFF or WOFF2 files.
- Type your sample text or pick a preset, then adjust size, line height, spacing and colors. You can also type directly in the preview.
- Open Waterfall to see the text at every common size, or Glyphs to browse every character the font contains.
- Click a glyph to see its code point, escapes and outline, or search for a character such as € or U+20AC.
- Check Font info for the license, version and metrics, then press Export sample PNG or Copy @font-face CSS.
Font file formats compared
| Format | Extension | Compression | Best for |
|---|---|---|---|
| TrueType | .ttf | None | Desktop installation, editing, conversion source |
| OpenType (CFF) | .otf | None (compact CFF outlines) | Print and desktop publishing with advanced typography |
| WOFF | .woff | zlib per table (about 40% smaller) | Websites that must support very old browsers |
| WOFF2 | .woff2 | Brotli + glyph transforms (about 30% smaller than WOFF) | All modern websites |
| TrueType Collection | .ttc | Shared tables | Several styles bundled in one file (common on macOS and Windows) |
Font metadata explained
Every OpenType font stores its information in tables identified by four-letter tags. This viewer reads them directly from the file:
| Table | What it contains |
|---|---|
name | Family, style, full name, version, copyright, designer, foundry, license text and URLs |
head | Units per em (usually 1000 for CFF or 2048 for TrueType), creation and modification dates, font revision |
OS/2 | Weight class (100–900), width class, embedding permissions (fsType), cap height and x-height, vendor ID |
hhea | Ascender, descender and line gap used by browsers to compute line height |
cmap | The character map: which Unicode code point maps to which glyph |
maxp | Total number of glyphs, including unmapped alternates |
GSUB / GPOS | OpenType features: ligatures, small caps, old-style figures, kerning and mark positioning |
fvar | Variation axes of a variable font, such as weight (wght), width (wdth) and slant (slnt) |
Example: a font with 2,048 units per em and an ascender of 1,901 has text that rises 1,901 ÷ 2,048 = 0.93 em above the baseline, so at 16 px the tallest glyphs reach about 14.9 px.
Weight class numbers
| usWeightClass | Name | CSS font-weight |
|---|---|---|
| 100 | Thin | 100 |
| 200 | Extra Light | 200 |
| 300 | Light | 300 |
| 400 | Regular | 400 / normal |
| 500 | Medium | 500 |
| 600 | Semi Bold | 600 |
| 700 | Bold | 700 / bold |
| 800 | Extra Bold | 800 |
| 900 | Black | 900 |
Tip: match the font-weight in your @font-face rule to the font's weight class. If you declare a Bold file as weight 400, browsers will synthesize "fake bold" on top of it when you use font-weight: bold.
Frequently asked questions
How do I preview a font without installing it?
Drop the font file onto this page. The browser loads it with the FontFace API just for this tab, so you can see sample text, glyphs and details without installing anything on your system.
Are my font files uploaded anywhere?
No. The font is read and rendered entirely in your browser. Nothing is sent to a server, which matters for commercial fonts whose license forbids sharing the file.
Which font formats are supported?
TrueType (.ttf), OpenType (.otf with CFF outlines), WOFF, WOFF2 and the first font of a TrueType collection (.ttc). Names, metrics and the character map are read from TTF, OTF and WOFF files. WOFF2 files preview fine, but their compressed tables cannot be decoded here, so the glyph list is found by testing common Unicode ranges.
Why do some glyphs not appear in the grid?
The grid lists the characters in the font's character map (cmap). Glyphs that have no Unicode mapping, such as ligatures, alternates or small caps, are only reachable through OpenType features. Turn those features on in the Sample text tab to see them.
What does the glyph outline view show?
When the opentype.js library loads, clicking a glyph draws its vector outline with the baseline (green), ascender and descender (dashed orange) and the advance width (gray lines), plus its name, index and bounding box in font units.
Can I use the font on my website?
Only if its license allows web embedding. Check the License and Embedding permissions rows in Font info. To use it, convert it to WOFF2 and add an @font-face rule; the Copy @font-face CSS button gives you a starting rule.