Font Viewer, TTF Viewer, OTF & WOFF Viewer
Font Viewer, TTF Viewer, OTF & WOFF Viewer, a VS Code extension by Zovo
Open any TTF, OTF, WOFF, WOFF2 or TTC font in VS Code to test text with its variable axes and OpenType features, see every glyph, and read its license before you ship it.
Free, MIT license. Needs VS Code 1.90.0 or newer. Extension ID zovo.font-viewer-vscode, version 0.1.1.
Screenshots come from a real VS Code 1.142 window running the packaged extension. The fonts are JetBrains Mono and Fraunces (both SIL Open Font License 1.1) and Zovo Test Sans, a small test font made by scripts/make-fixtures.py.
- Test real text. Type a sample, drag the size slider, and check a waterfall from 12 to 96 px. Move the weight, width or any custom axis, and turn features like
liga,kern,ss01orzeroon and off. - See every glyph, also ligatures and alternates that no key types. Search by name, character,
U+20ACor glyph id, and copy the character, the code point or the outline as SVG. - Check the license. The Info tab shows the license, designer, copyright and embedding rights, and gives you a ready
@font-facerule.
Quick start
- Install the extension.
- Click a
.ttf,.otf,.woff,.woff2or.ttcfile in the Explorer.
Font Viewer is the default editor for these files. It's read-only, so it never changes the font.
Questions people ask
Is Font Viewer, TTF Viewer, OTF & WOFF Viewer free?
Yes. Font Viewer, TTF Viewer, OTF & WOFF Viewer is free and MIT licensed.
How do I install Font Viewer, TTF Viewer, OTF & WOFF Viewer?
Click "Install in VS Code" above, or search for zovo.font-viewer-vscode in the Extensions view.
What you can do
| Tab | What it shows |
|---|---|
| Type tester | Your sample text in the font, a size slider from 8 to 200 px and a waterfall. A slider for each variable axis, a list of named instances, and a check box for each OpenType feature. Copy CSS gives the @font-face rule plus the matching font-variation-settings and font-feature-settings. |
| Glyphs | Every glyph drawn from its outline, with its name and code point. Glyphs load in pages as you scroll, so a CJK font with 20,000 glyphs opens fast. Click one to see it large with the baseline, x-height, cap height and advance width. |
| Characters | The characters of the font grouped by Unicode block, with coverage such as "Basic Latin 95/128". Turn off "Only characters in the font" to see the gaps. |
| Info | License and credits, the full name table, metrics, axes and instances, GSUB and GPOS feature tags, all tables with sizes, and the @font-face rule. |
Supported files
| Format | Extensions | Notes |
|---|---|---|
| TrueType | .ttf | Also variable fonts. |
| OpenType | .otf | CFF outlines. CFF2 variable fonts show their text and metadata, but the glyph grid draws them with the font instead of from outlines. |
| WOFF | .woff | Unpacked with Node's zlib. |
| WOFF2 | .woff2 | Unpacked by our own decoder, which rebuilds the glyf, loca and hmtx tables. |
| Collections | .ttc, .otc | Pick the font from a list in the header. |
When you save a new build of a font, the open view reloads.
You can also right-click a font in the Explorer and choose Copy CSS @font-face without opening it.
Settings
| Setting | Default | What it does |
|---|---|---|
fontViewer.sampleText | The quick brown fox jumps over the lazy dog. 0123456789 | Text in the type tester and the waterfall. You can edit it in the view too. |
fontViewer.previewSize | 48 | Starting size in pixels of the large sample. |
fontViewer.maxFileMB | 64 | Larger files show a message instead of opening. |
fontViewer.askForRating | true | One rating request after a few days of use. |
fontViewer.showSupportLinks | true | The small Sponsor and More free viewers links in the status line. |
Privacy
Font Viewer works offline. It makes no network calls and sends no telemetry. The font is read from disk and loaded into the view from memory, and the view has a strict Content Security Policy with no remote scripts. Font names and other text from the file are shown as plain text.
Known limits
- Glyph outlines show the default instance of a variable font. The type tester, waterfall and character map follow the axis sliders.
- Color fonts (COLR, SVG, sbix, CBDT) are drawn in color in the type tester and the character map, but the glyph grid shows their plain outlines.
- WOFF2 collections, SVG fonts,
.dfontand Type 1 fonts aren't supported. - Shaping in the type tester comes from VS Code's own engine (Chromium), so it matches what a browser shows.
License
MIT. Font Viewer bundles opentype.js (MIT). See THIRD-PARTY-NOTICES.md.
Install Font Viewer, TTF Viewer, OTF & WOFF Viewer
Click the button to open VS Code and install it, or press Ctrl+P (Cmd+P on macOS) in VS Code and run ext install zovo.font-viewer-vscode.
Free, MIT license. Needs VS Code 1.90.0 or newer. Extension ID zovo.font-viewer-vscode, version 0.1.1.
Source code and issues are on GitHub.
Support this work
If this extension saves you time, you can support the work on GitHub Sponsors. Monthly tiers start at $5, and one-time tiers start at $15. Sponsorship is optional, and the tool works the same without it.