Font File Viewer (TTF, OTF, WOFF, WOFF2)
Look inside a font file: glyphs, licence, features, axes and metrics — all on your device.
Open a font
The quick brown fox jumps over the lazy dog 0123456789
Scripts
| Script | Characters |
|---|
Unicode blocks
The tester uses the OpenType features and axis values chosen in the other tabs.
This font has no OpenType layout features (no GSUB or GPOS table).
CSS
This is not a variable font: it has no fvar table.
CSS
Name table
| ID | Name | Value |
|---|
| Tag | What it holds | Size |
|---|
About the Font File Viewer (TTF, OTF, WOFF, WOFF2)
Open a font file — TrueType (.ttf), OpenType (.otf), WOFF, WOFF2, or a TrueType collection (.ttc) — and see what is inside. The overview shows the family, style, weight, version, outline format, glyph and character counts, variable axes, designer and manufacturer. Tabs then show every glyph in a searchable grid with its Unicode values, which scripts and Unicode blocks the font covers, a type tester with a waterfall of sizes, the OpenType features you can switch on and off, sliders for each variable axis with the named instances, the vertical metrics browsers use, the full name table with the copyright and licence, the embedding permissions (OS/2 fsType) and the list of tables.
Every setting writes the CSS to match: font-variant-* and font-feature-settings for features, font-variation-settings and the high-level properties for axes, and an @font-face rule for the file. The font is read in your browser and never uploaded.
How to use it
- Choose or drop a font file, or open one of the samples.
- Read the overview, then switch tabs: Glyphs to browse and search (type a character, a code such as U+20AC, a range such as U+0400-04FF, #12 for a glyph id, or part of a glyph name), Coverage for scripts and blocks.
- Use Type tester with your own text, sizes and line height, or tick Waterfall.
- Tick features under OpenType features and move the sliders under Variable axes; copy the CSS each tab writes.
- Check Names & licence before you use the font on a website or in a product.
Examples
OpenType features: tick Tabular Figures (tnum)
.text {
font-variant-numeric: tabular-nums;
}The high-level property is used where CSS has one; anything else goes into font-feature-settings.
Variable axes: Weight (wght) 600, Width (wdth) 87.5
.text {
font-weight: 600;
font-stretch: 87.5%;
}
.text {
font-variation-settings: "wght" 600, "wdth" 87.5;
}Names & licence tab
Embedding (OS/2 fsType): Installable embedding … Licence URL: https://openfontlicense.org
fsType states the vendor’s embedding intent; the licence text decides what you may do.
Common uses
- Checking that a font has the characters a project needs (Vietnamese, Cyrillic, Devanagari, currency symbols) before buying or using it.
- Finding the stylistic sets and alternates a font offers, and the CSS to use them.
- Reading the licence, copyright and embedding permissions of a font someone sent you.
- Debugging line-height and clipping problems by comparing the hhea, typo and win metrics.
- Looking at the glyphs of a WOFF2 file from a website.
Embedding permissions (fsType)
The OS/2 table’s fsType field (OpenType specification) is the vendor’s statement of how the font may be embedded in documents: Installable (no restriction), Editable (embedded in editable documents, not installed), Preview & Print (read-only documents) or Restricted licence (no embedding without permission), plus “no subsetting” and “bitmap only” bits. It is not the licence itself — read the licence text and URL in the name table, and the licence you got with the font, before using it on the web or in an app.
Vertical metrics and line height
Browsers set line-height: normal, and the space above and below text, from the font’s vertical metrics, and the operating system decides which set: macOS uses the hhea ascender, descender and line gap, while Windows uses the OS/2 win ascent and descent, or the OS/2 typo values when the font sets the USE_TYPO_METRICS flag. Windows applications also clip glyphs that reach beyond the win values (Google Fonts’ guide to vertical metrics). If text looks cut off or spaced differently between operating systems, the three sets in Metrics usually disagree; the line height shown there is the hhea one.
Features and axes in CSS
Prefer the high-level properties — font-variant-numeric, font-variant-caps, font-variant-ligatures, font-kerning, font-weight, font-stretch, font-style — because they combine with other styles; font-feature-settings and font-variation-settings replace each other’s whole value when set in two places. Stylistic sets (ss01–ss20) and character variants have no high-level property in practice, so the tool writes them with font-feature-settings. Features marked on by default are ones browsers apply by themselves, such as standard ligatures and kerning (CSS Fonts Module Level 4).
Limitations
- Bitmap-only and colour-only glyphs (sbix, CBDT, SVG) are listed but drawn as outlines only where the font has outlines.
- The type tester needs your browser to accept the font; browsers reject damaged or unusual fonts that the file reader can still describe.
- Script and block counts use your browser’s Unicode data, so the newest characters may count as unassigned in older browsers.
- Embedded OpenType (.eot) and old Mac suitcase fonts (.dfont) are not supported.
Privacy
Everything happens in your browser. What you enter or open here is not uploaded or stored by MySmartCoPilot.
Frequently asked questions
Is my font uploaded anywhere?
No. The file is read in your browser and shown with the FontFace API from memory. The page works offline once loaded.
Why are some glyphs not mapped to a Unicode character?
Alternates (for stylistic sets and swashes), ligatures, small capitals and components of accented letters have no code point of their own; OpenType features substitute them in. Choose All glyphs to see them.
What is the difference between WOFF, WOFF2 and TTF?
TTF and OTF are the font itself. WOFF and WOFF2 are compressed wrappers for the web (zlib for WOFF, Brotli plus outline transforms for WOFF2) and decode to the same font. To convert between them use the Webfont Converter.
Does fsType “Installable” mean I may use the font on my website?
Not by itself. fsType describes document embedding; web use is governed by the licence (for example the SIL Open Font License allows it, while many commercial licences need a separate web licence).
Can I compare several fonts side by side?
Use the Font Previewer to type a sample and see it in many fonts at once.