Free Bitmap Font Generator: Make .fnt Fonts for Games

If you've tried to draw text in Phaser or PixiJS and hit blurry glyphs, layout hiccups, or a fight with web-font loading, a bitmap font is the fix. It bakes your typeface into an image once, so the engine just blits pre-rendered glyphs — fast, crisp, and identical on every device. This guide explains what a bitmap font is, when to use one, and how to make and load one for free in your browser.

What is a bitmap font?

A bitmap font is two files:

• A PNG containing every glyph you need, packed onto one sheet.
• A .fnt file (the AngelCode BMFont format) that lists each character's position, size, offset and kerning in that PNG.

At runtime the engine reads the .fnt, finds each letter in the PNG, and stamps it to the screen. Nothing is rasterised on the fly, which is why bitmap text is the fastest way to draw lots of changing text — score counters, timers, damage numbers.

Bitmap font vs. TTF / web font — which to use?

Use a bitmap font when:

• Text updates every frame (scores, FPS, timers) — bitmap text avoids re-rasterising.
• You want a styled look baked in — outline, shadow, gradient, pixel-art edges — with zero runtime cost.
• You're on a WebGL renderer like Phaser's BitmapText or PixiJS's BitmapText, which are built for exactly this.

Stick with a TTF / web font when: you need arbitrary Unicode, user-supplied text in many languages, or selectable/accessible DOM text. Bitmap fonts only contain the characters you bake in.

Step 1 — Generate the bitmap font

Open the free EazyStudio Bitmap Font Generator and:

• Pick a font and size (match the biggest size you'll display — you can scale down cleanly, but scaling up blurs).
• Set fill colour and an optional stroke/outline — these get baked into the PNG.
• Choose the character set — letters, numbers and the punctuation you actually use. Fewer glyphs = smaller texture.

Export the .fnt and its PNG page. Keep both files together with matching names (e.g. myfont.fnt + myfont.png).

Step 2 — Load it in Phaser 3

Phaser reads the AngelCode .fnt directly:

Update it as often as you like — scoreText.setText('SCORE: ' + score) — with none of the cost of dynamic Text.

Step 3 — Load it in PixiJS

Point the loader at the .fnt; it pulls in the PNG page automatically:

Using it in Unity

Unity's TextMeshPro uses its own SDF font assets rather than .fnt, so for TMP you'd generate a Font Asset from the TTF instead. But the AngelCode .fnt + PNG still works with classic bitmap-font packages (e.g. community BMFont importers) when you want a pixel-perfect, pre-styled look that TMP's SDF smoothing would soften.

Why generate in the browser?

• No install — no BMFont desktop tool; it runs in your browser and nothing is uploaded.
• Free — standard AngelCode .fnt output that Phaser and PixiJS read natively.
• Fast iteration — tweak size, colour or outline and re-export in seconds.