Font & Typography Inspector Studio
100% client-side with zero server upload. Inspect TTF, OTF, WOFF, and WOFF2 metadata, glyph outlines, Unicode and language coverage, OpenType layout features, variable font axes, side-by-side comparison, and CSS @font-face generation.
- In-browser local inspection & live preview for TTF, OTF, WOFF, and WOFF2
- Detailed typographic metrics: unitsPerEm, ascender, descender, lineGap, capHeight
- Interactive glyph explorer with Unicode code point search and vector SVG outlines
- Comprehensive script coverage (Latin, CJK, Arabic, Devanagari, Cyrillic) and 10-language benchmarks
- Missing glyph detector for arbitrary text to observe tofu characters and fallback risks
- OpenType layout inspection (GSUB/GPOS): ligatures, kerning, fractions, and tabular figures
- Variable font (fvar/STAT) playground with live axis sliders and CSS variation settings
- Real-world typography specimen (headings, body, UI, buttons, tables, code) with WCAG contrast
- Multi-font side-by-side comparison (up to 4 fonts) with strict neutrality and no fake rankings
- Webfont QA with @font-face generator, unicode-range candidate extraction, and FontFace verification
- Multi-format export: JSON, CSV, Markdown, standalone HTML, vector SVG, and PDF audit reports
- Zero server uploads, zero cookies, zero persistent storage for strict privacy compliance
Drag & drop font files here
or choose from device (TTF, OTF, WOFF, WOFF2)
No fonts loaded yet. Click a sample font button above or drop your font file.
Load an included standard sample font to instantly explore OpenType features and variable axes, or drop your own TTF, OTF, WOFF, or WOFF2 font files.
About Font & Typography Inspector Studio
Do not just view fonts—diagnose their underlying binary structure, character coverage, OpenType features, variable axes, and webfont readiness before deployment in production applications.
All processing executes entirely in your browser (client-side) using modern web standards. Your font files, preview text, and cryptographic hashes are never uploaded to any external server.
Supported Formats & Structural Verification
Full support for TrueType (TTF), OpenType (OTF / CFF), WOFF, and WOFF2 containers. Validates SFNT table directories (head, hhea, hmtx, maxp, OS/2, post, cmap, name, and more) with 32-bit checksum calculations and out-of-bounds guards.
For WOFF2 fonts, browser-native FontFace rendering is coupled with direct container header inspection, honestly framing client-side decompressed capabilities without heavy WASM bloat.
Unicode, Script & 10-Language Coverage Analysis
Traverses cmap tables to compute objective character repertoire across Latin, Cyrillic, Greek, Hiragana, Katakana, CJK Unified Ideographs, Arabic, and Devanagari scripts.
Includes a real-time Missing Glyph Detector that identifies tofu characters, combining marks, emojis/ZWJ sequences, and complex text shaping requirements on arbitrary text.
OpenType Layout (GSUB/GPOS) & Variable Font Playground
Inspects standard OpenType layout features (ligatures, kerning pairs, fractions, small caps, tabular figures) with live interactive toggles to test visual changes.
Interactive Variable Font console allows testing continuous variation axes (wght, wdth, slnt, opsz) with real-time sliders and generated CSS font-variation-settings.
Multi-Font Neutral Comparison & Multi-Format Reports
Load up to 4 fonts in the session pool to compare file sizes, glyph counts, unitsPerEm, script coverages, and OpenType capabilities side-by-side under identical typographic conditions with no artificial rankings.
Export audit reports and specimen sheets in structured JSON, CSV, GitHub Markdown, standalone self-contained HTML, vector SVG, and verifiable PDF formats.
Frequently Asked Questions (FAQ)
What is the difference between TTF (TrueType) and OTF (OpenType)?
TTF primarily stores glyph outlines using Quadratic Bézier curves (glyf table), whereas OTF can use Cubic Bézier curves via CFF (Compact Font Format) and provides robust OpenType layout tables (GSUB/GPOS) for advanced typography.
What are WOFF and WOFF2 fonts?
WOFF (Web Open Font Format) wraps TrueType/OpenType fonts with zlib compression for web delivery. WOFF2 improves compression further using the Brotli algorithm, resulting in significantly smaller file sizes for modern web typography.
What is the purpose of this Font Inspector Studio?
It allows web developers, designers, and localization engineers to inspect font metadata, typographic metrics, character coverage, OpenType features, variable axes, and webfont readiness directly in their browser before deployment.
What is a glyph?
A glyph is the visual representation of a character. While a character is an abstract unit of text (e.g. 'A'), a glyph is the specific vector shape drawn on screen, which can vary with styles, ligatures, or alternates.
What does Unicode coverage measure?
It scans the font's cmap table to identify all Unicode code points mapped to actual glyphs, providing an objective metric of supported writing systems.
How does character coverage differ from complete language support?
Character presence (Glyph Coverage) does not guarantee contextual shaping, correct kerning, or punctuation rules required for complex languages. We report tested character set coverage to avoid misleading claims.
Can I preview uploaded fonts directly in my browser?
Yes. Using the W3C FontFace API, uploaded font files are registered into your browser's local font set and rendered in real-time with native GPU acceleration.
Does it support Japanese (Hiragana, Katakana, Kanji) inspection?
Yes. It evaluates coverage across Hiragana, Katakana, and standard Kanji sets, reporting exact percentages and missing glyphs.
How are complex scripts like Arabic and Devanagari handled?
The studio checks Unicode repertoire and leverages native browser font shaping to display right-to-left (RTL) Arabic text and Devanagari conjuncts.
What is a Variable Font?
A Variable Font contains one or more variation axes (e.g. weight, width, slant) in a single file, allowing continuous interpolation between styles using CSS font-variation-settings.
What are OpenType features (GSUB / GPOS)?
These are internal font tables that enable advanced typographic behaviors like standard ligatures, kerning pairs, tabular figures, fractions, and stylistic alternates.
What is kerning?
Kerning is the process of adjusting the horizontal space between specific character pairs (e.g. 'AV', 'To') to prevent awkward gaps and ensure optical harmony.
What is a ligature?
A ligature combines two or more adjoining characters into a single unified glyph (e.g. 'fi', 'fl') to avoid awkward visual collisions between letter strokes.
What is CSS @font-face?
It is the standard CSS rule that defines a custom font for web use, specifying family name, file source URL, format, weight range, and display behavior.
What is the font-display property in CSS?
It controls how webfonts are rendered while loading. Options like 'swap' show fallback text immediately and replace it once loaded, preventing blank text.
What is unicode-range in CSS?
It restricts a @font-face rule to specific Unicode code points, allowing browsers to download only the font slices needed for characters present on the page.
What is a font fallback chain?
A sequence of font names in CSS font-family (e.g. 'MyFont, Noto Sans, sans-serif') that tells the browser which secondary font to use when characters are missing.
Can this tool verify commercial font licensing?
It extracts metadata notices, license texts, and OS/2 fsType embedding bits for your review, but does not provide legal opinions or commercial guarantees.
Are font files ever uploaded to a server?
Never. All parsing, outline extraction, typography preview, and PDF report generation occur 100% locally in your browser with zero network transmission.
Can I compare multiple fonts side-by-side?
Yes. You can load up to 4 fonts in the session pool to compare file sizes, glyph counts, metrics, coverage, and layout features under identical typography settings.