About this app— Pixel Font Studio
A bitmap font designer with a per-glyph editor, live preview, sprite-sheet, SVG, and TTF export.
Pixel Font Studio is a browser-based bitmap font designer. You draw each glyph as a 2D boolean grid (on or off per cell), then preview the whole alphabet in any sample text, or compile the result into a JSON project, an SVG grid, a sprite-sheet PNG, or a real installable TTF. The whole editor is pure HTML and inline SVG — no canvas on the main view — and the TTF export is built client-side with opentype.js, so nothing about your font is sent to a server.
The app ships with one starter font: a Classic Arcade 8x8 monospace with 65 pre-drawn glyphs (A-Z, a-z, 0-9, and `!`, `?`, `.`). The full supported set is 93 characters — the remaining 28 punctuation marks start blank and you draw them yourself. There is no template picker; the Classic Arcade font is a starting point you can keep, edit, or wipe.
How it works
The right sidebar has two tabs. The Characters tab shows a 6-column grid of every supported glyph with a green dot when it has at least one filled cell and a progress bar of how many are done. The Inspector tab holds the project metadata (font name, creator), the grid resolution (Width × Height, min 2 max 64, with quick presets 8x8, 12x12, 16x16, 24x24), the per-pixel shape picker (11 shapes: square, circle, diamond, rounded, triangle, two slopes, arc corner, semicircle, half-bite, arc bite), the global block-spacing slider (0-40% gap), and the two destructive actions (Load Classic Arcade Font and Wipe Project, both two-click confirms).
The Designer canvas is the main view. The top bar has zoom (8-80 px per cell), grid-lines toggle, onion-skin of the previous and next character (hotkeys `[` and `]`), and undo/redo (capped at 30 steps). The left floating toolbar has the drawing tools: brush, eraser, fill, line, rectangle, circle, and select with a floating 8-handle transform gizmo (drag to move, Enter to bake, Esc to discard, Delete to erase). Nudge arrows shift the whole glyph by one cell. The bottom status bar shows the active cell coordinates and grid size.
Target Pixel Mode has two settings. In TARGET ONLY, each filled cell remembers its own shape and orientation, and the Inspector brushes apply to the next pixel you place. In PROPAGATE GLOBAL, every cell uses the project's single shape, and the Inspector edits the project shape. Rotation/flip hotkeys (T/H/V) only work in TARGET ONLY.
The Preview tab lays out your sample text using the active glyphs and live metrics. Sliders control display scale (1-12), tracking (-4 to 60), leading (0-120), word spacing (0-80), and space width (1-24). The background toggles light/dark, and there are five color swatches: Monochrome, Sand, Forest, Rose, Cyan. Missing characters render as a dashed placeholder with a faint pulse of the literal character. The default sample text is 'PIXELFONT STUDIO / THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG.'
The Export tab has four sections. Project File Control: export and import the full project as JSON (the toolbar Export → JSON saves the same format). Vector Glyph: download the active glyph as a path-based SVG, or download every filled glyph as a single combined SVG laid out as a square grid. Sprite Sheet Assembler: build a PNG atlas of every filled glyph with selectable pixel scale (1x, 2x, 4x, 8x) and padding (0/1/2/4 px) and a transparent-fill toggle. TrueType Exporter: compile and download a real .ttf font with opentype.js, including all 93 characters, unitsPerEm 1000, ascender 850, descender -150, and a .notdef rectangle.
Try these
Start from Classic Arcade, customize one glyph
Click 'Load Classic Arcade Font' in the Inspector. Open the Designer, pick the letter 'a' from the Characters grid, and use the brush to round the bottom-left corner. Open the Preview tab — your change is live, every 'a' in the sample text updates. Click the Export tab and download the SVG of just the 'a' to inspect it.
Build a 16x16 rounded font from scratch
In the Inspector, set Width and Height both to 16, click 'Resize Grid Dimensions', then 'Wipe Project'. In the Pixel Block Style picker, pick 'rounded'. Now draw A-Z, a-z, and 0-9. The Preview tab shows your font live. When you're done, hit the Export tab → Sprite Sheet Assembler, pick 4x scale and 1 px padding, and download the PNG atlas.
Compile and install a TTF
After drawing or loading a font, open the Export tab. The TrueType section shows the current metrics (unitsPerEm 1000, ascender 850, descender -150). Click 'Compile & Download font .ttf'. The file installs on macOS, Windows, and Linux — open the downloaded file and your system font picker picks it up. The TTF includes all 93 characters; empty ones still get an advance width so the font is complete.
Use Target Pixel Mode for mixed-shape glyphs
Set Target Pixel Mode to TARGET ONLY. Draw the letter 'B' entirely with 'square'. Then draw a small 'o' entirely with 'circle'. Each cell remembers its own shape, so the font can mix square and circle pixels in the same word. Toggle to PROPAGATE GLOBAL and the same project is forced to a single global shape.
FAQ
Why does the project disappear when I refresh the page?
The state is held in React useState only. There is no localStorage persistence — refreshing the page wipes the in-memory project. To keep work between sessions, use the toolbar Export → JSON, then Import JSON in the Export tab.
The Classic Arcade preset only loaded 65 characters. What about the rest?
The preset covers A-Z, a-z, 0-9, plus `!`, `?`, `.` — 65 glyphs. The other 28 punctuation characters in the full 93-char set start blank after loading. You draw them yourself in the Designer.
Can I edit kerning between letters?
No. Every glyph uses a single per-glyph advance width, and space uses a separate space-width value. The Preview tab's Tracking and Word Spacing sliders are preview-time only — they don't write kerning into the exported font.
Can I import an image and turn it into a glyph?
Not in this app. Pixel Art Forge has an image-to-pixel import for sprite art, but Pixel Font Studio is draw-only. The fastest path to a custom glyph is to draw it on the canvas.
Does the TTF work if I haven't drawn most of the characters?
Yes. The exporter iterates all 93 characters; empty ones get an empty path and just contribute an advance width. The font installs cleanly in any OS; characters you haven't drawn render as a .notdef rectangle until you fill them in.
Related tools
Comments
Comments are not configured yet.
This site uses Giscus (GitHub Discussions) for comments. To enable, set the following environment variables and redeploy:
NEXT_PUBLIC_GISCUS_REPO=owner/repo NEXT_PUBLIC_GISCUS_REPO_ID=R_xxx NEXT_PUBLIC_GISCUS_CATEGORY=Comments NEXT_PUBLIC_GISCUS_CATEGORY_ID=DIC_xxx
The values come from giscus.app after you enable Discussions on the GitHub repo.