Getting Started

PixBob Font Studio

PixBob Font Studio is a pixel font editor and bitmap font tool built for pixel artists, indie game developers, and game jam developers. Draw glyphs on a fixed pixel grid, preview them as real text while you work, and export a font your engine or design tool can actually use — as a proper vector font (TTF/OTF/WOFF/WOFF2) or as a ready-to-use bitmap font atlas (FNT, XML, JSON, or PNG).

What you can do

• Draw pixel-perfect glyphs on an adjustable 8 x 8 to 16 x 16 grid.
• Preview your font as live, editable text while you draw.
• Fine-tune spacing, height, and baseline with visual, draggable guides.
• Import an existing TTF/OTF as a pixel-sampled starting point.
• Export to vector formats (TTF, OTF, WOFF, WOFF2) or bitmap formats (FNT, XML, JSON, PNG atlas).
• Save your work as a .pfs project file and pick up exactly where you left off.

Web vs. Desktop

PixBob Font Studio runs both as a web app in your browser and as a native desktop app (built with Tauri). Both share the same interface and features — the differences are in how files are saved and opened.

Creating Your First Font

1. Start a new project. On launch, choose New Project from the welcome screen (or the N button in the header at any time). Give your font family a name and pick a canvas size — you can change the canvas size later, but starting with the right one saves you a resize down the line.
2. Pick a glyph. The Active Glyph box at the top of the editor shows which character you're currently drawing — type a character directly into it, or use the arrows to step through your character set.
3. Draw. Select the Pencil tool and click or drag on the canvas to fill pixels. Switch to Eraser to remove them, or hold the right mouse button to erase without switching tools.
4. Check your spacing. Switch to the Text Preview tab to see your glyphs as real, readable text as you draw more of them.
5. Fill in metadata. Switch to the Font Metadata tab and add a family name, designer, and license before exporting — these become part of the exported font file.
6. Export. Click Export Font, choose Vector or Bitmap, select your format(s), and save.

Basic Workflow

Most PixBob projects follow the same general path, whether you're making a full 96-character font or just a handful of glyphs for a game jam:

None of these steps are strictly locked to that order — you can jump back to drawing after exporting, adjust metrics halfway through, or add metadata first. But for a first pass, following this order means your Text Preview and export both reflect finished, correctly-spaced glyphs rather than a half-drawn set.

Editor

Interface Overview

The editor is split into two panels: the Glyph Editor on the left, where you draw, and the Workspace on the right, where you browse glyphs, preview text, and edit font metadata.

Glyph Editor & Drawing Tools

The Glyph Editor is where individual characters get drawn, one at a time, on a fixed pixel grid.

Tools

The Move tool doesn't nudge one pixel at a time — it shifts the whole glyph as a single shape, based on how far you drag from your starting point. Pixels that get pushed outside the canvas are dropped, not wrapped around.

Clear Canvas wipes every pixel from the currently active glyph only — other glyphs in your font are untouched.

Glyph Library

The Glyphs tab in the Workspace panel shows every character in your font as a small preview tile. Click any tile to make it the active glyph in the editor.

Use the category tabs to narrow the grid down:

The glyph count in the top-right of this tab reflects the currently selected category, not your whole font.

Canvas Size

Canvas size controls the pixel grid every glyph is drawn on — anywhere from 8x8 up to 16x16 pixels. You can set it when creating a new project, or change it later using the vertical slider beside the canvas.

If Canvas Lock (the lock icon next to the Active Glyph box) is on, the canvas size control is disabled — useful once you've settled on a size and want to avoid resizing by accident.

Canvas & Font Guides

Three colored guide lines are drawn directly on the canvas, matching the values set in the Metrics & Spacing panel:

You don't have to use the Metrics panel's steppers to adjust these — you can drag any guide line directly on the canvas. Hover near a line until the cursor changes, then drag; the matching Metrics field updates live, and vice versa.

Undo / Redo

Undo and redo are tracked per glyph — switching to a different character doesn't clear or share history with the one you were just editing. Each glyph keeps up to 20 steps of history.

Use Ctrl+Z (undo) and Ctrl+Y or Ctrl+Shift+Z (redo), or the Undo/Redo buttons above the canvas. On macOS, use Cmd in place of Ctrl.

Live Text Preview

The Text Preview tab renders your glyphs as real, editable text, using your font's actual spacing rules — the same rules used when you export. It's the fastest way to spot inconsistent spacing or misaligned glyphs before exporting.

Editing the preview text

Click directly into the preview to place your cursor and type, just like a text field. It supports selection, its own Undo/Redo history (Ctrl+Z / Ctrl+Y, tracked separately from glyph-canvas undo), and works with on-screen keyboards on mobile.

Text presets

The Text Presets dropdown offers ready-made sample text: Lowercase, Uppercase, Numbers, Symbols, and a Sample Paragraph. Each preset has two actions:

• Add — appends the preset on a new line, keeping whatever text is already there.
• Change — replaces the entire preview text with the preset.

Zoom

The zoom slider (1×–6×) scales the preview only — it has no effect on your exported font.

Metrics & Spacing

The Metrics panel, alongside the Text Preview, controls how glyphs are spaced and aligned — both in the preview and in your exported font. Every value here is saved as part of your project.

Projects

New Project

Start a new project from the welcome screen, or at any time via the N button in the header. You'll be asked for a font family name and a canvas size (8×8–16×16); both can be changed later.

Open Project

Open an existing .pfs (or .json) project file three ways:

• Click the F Open Project button in the header.
• Drag and drop the file anywhere onto the app window.
• Desktop app only: double-click a .pfs file in your operating system's file explorer.

Save & Save As

The Save button opens a small menu with two options:

PixBob also autosaves your work locally in the background as you edit, and restores it automatically the next time you open the app — this is separate from explicitly saving a .pfs file, and is only a local recovery copy, not a substitute for saving.

.PFS Project Files

A .pfs file is your entire project — every glyph, your metadata, and your metrics — saved as plain, human-readable JSON. You can open it in a text editor if you're curious, or to fix something by hand.

{
  "version": "1.0",
  "fontName": "MyPixbobFont",
  "gridSize": 8,
  "metadata": {
    "fontName": "MyPixbobFont",
    "subfamily": "Regular",
    "author": "",
    "company": "",
    "version": "1.0.0",
    "copyright": "",
    "license": "",
    "description": "",
    "designerUrl": "",
    "metrics": {
      "letterSpacing": 1,
      "spaceWidth": 4,
      "maxHeight": 6,
      "descender": 1,
      "leftBearing": 1
    }
  },
  "fontData": {
    "A": [[0,0,1,0,0,0,0,0], "…7 more rows…"],
    "B": ["…"]
  }
}

A few things worth knowing about the format:

• Each entry in fontData is one character, stored as a 2D grid of 0s and 1s — 1 means a filled pixel.
• gridSize records the canvas size the project was drawn at. Older .pfs files saved before this field existed are still supported — PixBob detects the size from the glyph data itself.
• Because it's just JSON, .pfs files are easy to version-control, diff, or generate/edit with your own scripts.

Import TTF / OTF

PixBob can import an existing .ttf or .otf font as a starting point, converting each character into a pixel-sampled glyph on your chosen canvas size.

How the conversion works

Each glyph is rendered at high resolution, then sampled down to your grid based on brightness — so it's a close visual approximation of the original letterform, not a perfect vector-to-pixel trace. Only standard printable characters (basic Latin letters, numbers, and punctuation) are imported; anything outside that range is skipped. Imported glyphs are automatically centered horizontally; vertical placement follows the source font's own baseline.

Font Information

Font Metadata

The Font Metadata tab holds the information that gets embedded into your exported font file — the details other apps and operating systems read to identify and display it correctly.

License Options

The License field controls what's embedded in your exported font's license metadata. Pick a preset, or choose Custom to write your own terms.

This is separate from the PixBob Free Font License, which covers what you're allowed to do with fonts made using PixBob Font Studio itself — the License field here is what you tell other people about your finished font.

Export

Vector Fonts

Vector export builds real, scalable outline fonts from your pixel grid — every filled pixel becomes a small square in the glyph outline. You can select more than one format at once; PixBob bundles multiple formats into a single .zip.

Bitmap Fonts

Bitmap export packs every glyph into a single PNG texture atlas, plus a metadata file describing where each character sits in that atlas — the format most game engines expect for pixel-perfect text rendering.

Atlas Scale multiplies every pixel in the atlas by an integer factor (1–32×) — useful when your engine needs a larger source texture than your canvas's native pixel size.

Reference

Keyboard Shortcuts

On macOS, use Cmd in place of Ctrl. Tool switching (Pencil / Eraser / Move) and glyph navigation don't currently have keyboard shortcuts — use the on-screen buttons.

File Formats

Bitmap metadata schema

The FNT, XML, and JSON metadata formats all describe the same data: for every character, its position and size within the atlas PNG, plus horizontal offsets used for spacing.

info face="MyPixbobFont Regular" size=8 bold=0 italic=0 charset="" unicode=1 stretchH=100 smooth=0 aa=1 padding=0,0,0,0 spacing=1,1
common lineHeight=8 base=8 scaleW=136 scaleH=136 pages=1 packed=0
page id=0 file="MyPixbobFont-Regular.png"
chars count=2
char id=65 x=1 y=1 width=8 height=8 xoffset=-1 yoffset=0 xadvance=8 page=0 chnl=15
char id=32 x=0 y=0 width=0 height=0 xoffset=0 yoffset=0 xadvance=4 page=0 chnl=15

{
  "face": "MyPixbobFont Regular",
  "size": 8,
  "common": { "lineHeight": 8, "base": 8, "scaleW": 136, "scaleH": 136, "pages": 1 },
  "pages": ["MyPixbobFont-Regular.png"],
  "chars": [
    { "id": 65, "char": "A", "x": 1, "y": 1, "width": 8, "height": 8, "xoffset": -1, "yoffset": 0, "xadvance": 8, "page": 0 }
  ]
}

PixBob Free Font License

Fonts you create with the free version of PixBob Font Studio are yours. Here's what that means in plain terms:

• You can use your font in personal and commercial projects — games, apps, videos, and other creative work.
• You can modify your font and distribute it as part of a finished project.
• You cannot sell or redistribute the exported font file itself as a standalone font asset.
• PixBob Font Studio does not claim any ownership over fonts you create — they're your work.

FAQ

Troubleshooting