Font · 11 tools · nothing uploads

Render a font specimen sheet

Draw 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.

Input

Render a font specimen sheet flattens a font's real outlines and fills them into a PNG with a -preview suffix, at 48 pixels by default. Leave the text box empty and it draws up to 60 Unicode-mapped glyphs in font order. Nothing is anti-aliased and nothing wraps, and the sheet stops at 4000 by 2000 pixels.

Questions

What does the specimen show if I type nothing?

Up to 60 characters taken from the font itself, in glyph order, using every glyph that has a Unicode code point. That is the fastest way to see what a font covers. Type your own string into the text setting to render exactly that instead.

How is the image drawn?

From the font's real outlines. The curves are flattened into line segments and filled with a nonzero-winding scanline fill, the same rule TrueType and CFF contours are drawn with, so counters inside letters such as O and e come out as real holes. There is no canvas involved and no anti-aliasing, so edges are hard black on a white background.

Why is my long sample cut off on the right?

Because the image is capped at 4000 pixels wide and 2000 tall, and the text is drawn on a single line with no wrapping. A long string at a large size runs past the edge. Shorten the text or lower the font size, which accepts 8 to 300 pixels and defaults to 48.

Why did it refuse my text?

Because none of the characters exist in the font. The message says so and points you at Inspect a font file with detail set to glyphs so you can see what the font holds. Characters that are missing from the font but not all of them are simply dropped from the sample. A font size outside 8 to 300 is refused with its own message quoting the value you gave.

What file do I get?

A PNG named after the font with -preview added, so Inter.ttf gives Inter-preview.png. The result line also reports how many characters were drawn, the size used and the image dimensions. Everything happens in a Web Worker in this tab; the font is never uploaded.

Compare

Related Font tools

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.Takes one file1→1Subset a font to specific charactersDrop every glyph except the characters you list. A smaller file that still renders exactly the text you use.Takes one file1→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.Takes one file1→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.Takes one file1→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.Takes one file1→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.Takes one file