Font Glyph PNG Exporter
Export
Canvas
The canvas is drawn at 120px with the browser's text engine, so the PNG contains real rendered outlines — useful for a spec sheet, an icon draft or a client mockup. For production iconography, export vector outlines from a font editor instead: a PNG cannot scale past its pixel size.
Export notes
- · Canvas rendering uses the same webfont the preview uses; if the font has not loaded yet, the canvas draws the fallback — re-render after the font is ready.
- · For crisp results at small sizes, export at 2–4× the target size and let the design tool downscale.
- · A transparent background is not offered here on purpose: PNG alpha around antialiased edges produces dark fringes when scaled in some tools.
- · Nothing is uploaded — the canvas is drawn and encoded locally in this tab.
<canvas width="912" height="456"></canvas>
<script>
ctx.font = "120px 'Fraunces', serif";
ctx.fillStyle = "#111827";
ctx.fillText(glyph, cellCentreX, cellCentreY);
const png = canvas.toDataURL("image/png");
// → download as <a download href=png>
</script>You Might Also Need
The font glyph PNG exporter draws chosen characters into a canvas with the browser's own text engine and exports the sheet as a PNG. Because the live renderer does the drawing, the image carries the real shaping, kerning and antialiasing of the font.
What is Font Glyph PNG Exporter?
The font glyph PNG exporter takes a face and a string of characters and returns a PNG contact sheet of those glyphs. You pick from the preview catalogue, type the characters to export, set the glyph size, the column count and the padding per cell, choose background and ink colours, and the canvas redraws immediately. The panel reports how many glyphs were drawn, the canvas dimensions, an estimate of the PNG's byte weight and the background setting, and the download button saves the file with a slug derived from the family name.
- Faces: every family in the preview catalogue, labelled with its name and kind.
- Glyph size from 16px to 320px, in steps of 4, defaulting to 120px.
- Columns from 1 to 12, defaulting to 6, and padding per cell from 0 to 80px, defaulting to 16px.
- Background and ink are direct colour inputs; the default is a white sheet with near-black ink.
- Characters are deduplicated and spaces are skipped, so the sheet holds one cell per distinct visible glyph.
- Readouts: glyph count, canvas size in pixels, PNG size estimate and whether the background is still the default white.
The sheet is laid out arithmetically. A cell is the glyph size plus twice the padding, the canvas width is the cell multiplied by the column count, and the height is the cell multiplied by however many rows the character list needs. Each glyph is centred in its own cell with ctx.textAlign and ctx.textBaseline set to the middle, and the font string passed to the context is the catalogue family's full stack — so what lands in the PNG is the same face the preview uses, shaped by the same engine that renders the page. The image is read back with toDataURL, which is also where the byte estimate comes from: the encoded payload is measured and converted at the usual three-quarters ratio.
- No transparent background. A white sheet is the default and the tool deliberately does not offer alpha, because layered PNG alpha around antialiased edges produces dark fringes in some design tools.
- It is a raster export. A PNG cannot scale past its pixel size, so production iconography still belongs in a font editor that can emit outlines.
- One glyph per cell, drawn alone. There is no pair or paragraph mode, so kerning between two letters and ligature substitution are not shown.
- If the webfont has not finished loading, the canvas catches the fallback face — re-render after the font is ready rather than trusting the first draw.
- Spaces are dropped instead of becoming cells, so the sheet is not a proofing of your spacing.
Reach for it when a designed image is the deliverable rather than a font: a spec sheet for a client, a draught of an icon set, a glyph-by-glyph comparison between two faces, or a title card made from the letters themselves. Export at two to four times the final display size and downscale in the design tool, which is the cheapest way to keep small glyphs crisp. To compare the same characters across faces, the glyph comparison tool lines them up; the glyph browser is where a face's full character map is browsed, and the font specimen sheet serves the case where a whole specimen page is wanted rather than a character grid.
How to use Font Glyph PNG Exporter
- Pick a face from the catalogue and type the characters the sheet should contain.
- Set the glyph size, the column count and the padding between cells until the grid looks right.
- Choose background and ink colours, keeping the default white when the image will be composited later.
- Download the PNG, or open it in a tab when you only need to check the render.
When to use Font Glyph PNG Exporter vs related tools
Use it when the output is an image: a client-facing spec sheet, a glyph comparison, or a title card built from the letters themselves. Where the goal is browsing what a face contains rather than exporting a picture, the glyph browser is the faster surface, and the glyph comparison tool puts two faces side by side on the same characters. A full specimen with sizes, weights and text blocks is what the font specimen sheet produces, and characters that seem to be missing from a face are worth checking with the missing glyph detector before they are drawn.
Privacy & Security
This tool runs entirely in your browser — no data ever leaves your device. There is no server round-trip, no upload, no logging, and no account required. Your input is processed locally using client-side JavaScript and is never stored, transmitted, or accessible to anyone else. When you close the tab, everything disappears.