Font tools

11 tools

Convert, subset, inspect and preview font files in your browser using opentype.js. Subsetting cuts a font down to the characters you use, which is the usual way to make a web font smaller. Each tool says what it keeps and what it drops.

Inspect4

1→1Inspect a font fileRead a TTF/OTF/WOFF font's name table, glyph list or metrics table: one parse, three views.1→1Read a font's licence and legal infoRead the copyright, trademark, manufacturer, designer, description and licence fields (name IDs 0, 7-14) out of a font's name table. It reports what the font itself says, not a determination of whether you will sometimes use it.1→1List a font's kerning pairsRead GPOS pair-adjustment kerning, falling back to a legacy `kern` table when there is no GPOS, and list every glyph pair the font kerns with its horizontal adjustment, first 500, footnoted with the real total.1→1Check a font's Unicode block coverageCount, block by block, how many of a Unicode block's code points a font maps a glyph to, cmap only, so it says nothing about whether the font can shape combining marks or complex scripts correctly.

Convert & extract7

1→1Convert a font to OTFRe-encode a TTF, OTF or WOFF font as OpenType/CFF (.otf). This build of opentype.js only writes CFF outlines (verified by execution: it always emits the OTTO sfnt tag, never TrueType glyf, regardless of the source format), so OTF is the one honest direction: a real outline-format change coming from a TrueType source, a clean re-serialize coming from an OTF one.1→1Subset a font to specific charactersDrop every glyph except the characters you list. A smaller file that still renders exactly the text you use.1→1Render a font specimen sheetDraw a sample of a font's own glyphs to a PNG. It flattens the real bézier outlines and fills them with a nonzero-winding scanline rasterizer (no <canvas>, no upload), so what you see is what the font file contains.1→1Export font glyphs as SVGTurn specific characters into standalone SVG files, one per glyph, using the font's own bézier outlines, normalised to a 1000-unit em so files from different fonts are comparably sized.1→1Convert text to an SVG pathSet a line of text in a font and get back one SVG with a single `<path>` element, the outlines, not a `<text>` tag, so it renders identically everywhere without the font installed.1→1Embed a font as a CSS data URIBase64 a font file into a self-contained `@font-face` rule, no separate file to host, at the cost of the file growing about a third larger as text. Fine for a small icon font, wasteful for a large family.1→1Turn an icon font into an SVG spriteConvert every mapped glyph in an icon font (Font Awesome, Material Icons, ...) into one SVG sprite of `<symbol id="uXXXX">` elements, so a page can `<use href="#u...">` an icon without loading the font at all. Capped at 2000 glyphs.

Questions

What can I do with a font here?

Convert between formats, subset it to a set of characters, inspect its tables and metadata, and preview it. All four run through opentype.js in the page, so a licensed font is never uploaded.

What does subsetting drop?

Everything outside the glyphs you keep. The output is built from a glyph list, so kerning pairs and ligatures do not survive, and the file is written as CFF .otf. The tool page states both, because a subset font that silently loses kerning looks like a rendering bug later.

Can I convert a font I licensed?

Technically yes, and whether you are allowed to is a question for your licence, not for this tool. Many licences restrict modification and conversion. Nothing here transmits the font anywhere.

Why is the output always .otf?

Because this build of opentype.js writes CFF outlines only. A TrueType glyf table is not produced. The pages say so rather than letting you find out in a browser that renders nothing.