Pixel Font Editor

I originally made this while I was building a working LED platform board for The Empty Halls. A board like the ones you find in the London underground. I found the best way to have custom fonts was using a font atlas. In GDScript that ends up as a match statement where each character returns a list of row values and a width.

"A": return [[0x00, 0x0E, 0x11, 0x11, 0x1F, 0x11, 0x11], 6]

Each number in that list is one row of the character and each bit of that number is one pixel across, with bit 0 being the leftmost column. I started with a very basic python tool that took a font file and generated that match statement for me, but it was not perfect and I had to go in and fix a lot of the characters by hand.

Once I had a grid where I could draw every character by hand it was basically a pixel font editor already, it just could only save out GDScript. So now it can export real font files as well. Every character gets turned into a proper outline that follows the pixels exactly, so you can use the font in Godot, Unity, on a website, in Photoshop or just install it on your computer like any other font. The Godot table is still in there and works exactly the same as it did before.

1. Set up the grid Pick how many pixels tall your font is and which row you want the letters to sit on. You can change both later without losing anything you have already done.
2. Start from scratch or from a font Start a blank font and draw every character yourself, or load in a .ttf, .otf, .woff or .woff2 and every character gets drawn onto the grid for you. If the font is already pixel art, or it is a .bdf bitmap font, it can come in exactly as it was drawn so you can just edit it. If you already have a table in GDScript you can paste that in instead and carry on from there.
3. Draw and tidy up Click or drag on the grid to turn pixels on and off. You can nudge a character about, change its width, flip and invert the whole set at once, or add any character that is not there yet. Small text never converts perfectly so if you imported a font you will probably need to fix a few.
4. Export it Give your font a name, type something in to see how it looks, then download it as a .ttf, .otf, .woff, .bdf or BMFont. Or pick GDScript and it writes out the whole _get_char() function for you, ready to paste into your Godot script.

Nothing you load here gets uploaded anywhere. Your font file is read and converted inside your own browser and the fonts you export are made there too. The characters you end up with are saved in your browser's local storage so that refreshing the page does not lose your work. Clear everything wipes that if you would rather it did not stick around.

Rows are stored as 32 bit integers so a character can be at most 32 pixels wide and the grid at most 32 rows tall. Anything sitting past a character's width gets stripped out when you export, so what you see on the grid is exactly what ends up in the font.

The Sharp at setting on the export tab is the font size where one pixel on the grid is exactly one pixel on screen. It starts off matching your grid height but you can set it to whatever you want. So if you set it to 16 the font is sharp at 16px, and also at 32px, 48px and so on because every pixel just becomes a bigger block. Anything in between and the pixels stop lining up with the screen and it starts to look blurry. Setting it lower than your grid height is handy when your letters only use some of the rows, as the line spacing still takes up the whole grid. If you are using it in Godot it is also worth turning antialiasing off in the font's import settings.

If you are not sure which format to pick then .ttf works almost everywhere. A .woff is the same font but smaller, which is what you want for a website, and .otf is there for anything that specifically asks for it. BDF is the old plain text bitmap format that a lot of pixel font tools and Linux still use, and BMFont gives you a .fnt file and a .png sprite sheet together in a zip which most game engines can read, Godot included.

Fonts really start to fall apart at small pixel sizes. Thin strokes disappear completely and round letters go lumpy. If the whole set looks off then it is usually worth nudging the size or threshold sliders before you start editing anything by hand, but if it is only a few characters that came out wrong it may be quicker to just redraw them.