With the release of Bitsy 5 came a brand-new font system. The new system is far more customizable than the old one: among other features, it includes a spec for a .bitsyfont format which can be used to make custom fonts.

Since the format is plaintext, it's relatively easy to make custom fonts by typing them out in a text editor, but from a creative perspective, it's a bit hard to draw characters that way. To help with this, Fontsy provides a way to convert back-and-forth between .bitsyfont and .bitsyfont.png files, which can be used to draw fonts in a more traditional image editor.

Notes:

  • The default bitsy font is imported by default
  • Fontsy doesn't save anything; make sure to export your work!
  • Font data is 1-bit (i.e. black and white)
  • The images used for the old custom font hack are not compatible with Fontsy
  • If you're using the built-in editor, keep the export section closed to improve performance
  • Hover over characters in built-in editor to see code points

Recommended workflow:

  1. Pick an existing font to use as a base (e.g. the default bitsy font, or one of the others included in the bitsy editor)
  2. Import .bitsyfont file
  3. If needed, make minor edits using the built-in editor (e.g. changing size, name, or adding characters)
  4. Export .bitsyfont.png image
  5. Open image in external editor and customize font (note: make sure not to edit the borders, and to export in a mode which doesn't affect colours)
  6. Import edited .bitsyfont.png image
  7. Export .bitsyfont file
StatusReleased
CategoryTool
PlatformsHTML5
Rating
Rated 4.9 out of 5 stars
(10 total ratings)
AuthorSean
Tags2D, Bitsy, Character Customization, Fonts, Pixel Art
Average sessionA few seconds
LanguagesEnglish
InputsMouse
LinksSource code

Comments

Log in with itch.io to leave a comment.

Thanks for this amazing tool!

Question: Is it possible to upload an image and no drop glyphs? It seems as if certain codepoints are automatically turned off when I import my edited PNG.

If not, any hints about which codepoints are not supported on import?

Thanks!

(+1)

I'm not sure offhand why individual codepoints would not be working on import. Some Qs that could help identify the problem:

  • Are the codepoints that aren't working part of the standard character set, or are you working in a certain extended range?
  • Do the codepoints work when starting from scratch and doing an export + re-import without editing anything?

Without knowing more about this issue, one thing you might be able to try as a workaround is starting out with the characters in a different range that you've confirmed is working for export/re-import, and then remapping them back to your intended range via the font data manually afterwards.

(+1)

Thank you for the quick and detailed reply! Your suggestions helped me narrow down the issue.

It seems the blue dots in the grid between each glyph (and perhaps the red lines, too?) encode information about which codepoint the associated glyph represents. I must have accidentally overridden a few of these during my editing.

Now that I’ve replaced the grid with a copy from the original I’m able to import without any issue. ✅

(1 edit)

the importing a file picture does not work :(

Are you using Firefox? I tested just now in both Chrome and Firefox: Chrome is working fine, but Firefox has an issue if you don't strip the colour profile before uploading.

no, i am on a chromebook (my other computer is updating) does the PICO8 font work? that might be my problem!

oh, you have to use a very specific image layout for this to work: if you want to use the PICO-8 font, you'll need to first make a template in Fontsy with the intended width/height/character set, then copy the characters over from your PICO-8 image and re-import it (there's important data encoded into the grid borders of the layout Fontsy uses that tells it how to parse the characters)

ok, thanks!

I mapped out some of the PICO-8 monospaced font, but only the 3x5 characters from the exclamation point onward. I'm sure you could expand on it tho!