Announcing pdfontconv: a web-based conversion tool to Playdate .fnt from TTF, OTF, WOFF, WOFF2

SDK Development Discussion
1

pdfontconv is a browser-based tool that lets you convert any TTF, OTF, WOFF or WOFF2 font into Playdate's .fnt format.

Output grid of font glyphs
Output grid of font glyphs679×559 10.6 KB

Example text
Example text1180×55 2.23 KB

I only found out about tophat after I hacked up pdfontconv, but I'm glad I wrote it anyway: tophat clips glyphs on some fonts (e.g. Permanent Marker) and it doesn't import kerning data.

To make sure that glyphs are never clipped, pdfontconv adds extra padding around each glyph, and then writes a negative tracking value to the .fnt file to compensate. The drawback is a bit of left and right margin on each line of text, as you can see in the example above. Maybe @daniel wants to borrow this hack for tophat :wink:

Browsers don't have an API to access kerning data directly, so pdfontconv just brute-forces it by measuring the width of each possible character pair. I'm not sure how well this works for larger character sets; if it's too slow, I might need to write a font file parser.

I hacked this up in a day, so there might be bugs, and there are definitely usability issues. But I guess most people won't need to use it for more than a few minutes, so it'll do for now.

>> LAUNCH PDFONTCONV <<

14 Likes
2

Hi, this looks great.

It is exactly what I need. I'm surprised you haven't had more feedback on this.

I'm having trouble though.

There is a button that says "download .fnt", but when I click it, it downloads a .txt file.

I have clicked both buttons, so now I have a .txt file, and a .png file. But I'm not sure what I do with these to make a working .fnt file.

Can you advise?

Thanks.

3

There are two ways to specifiy a Playdate font: with the PNG embedded in the FNT, or with the PNG as a separate file. pdfontconf only supports the latter, with a separate PNG file. So you need both files.

On my test browsers (Firefox and Chromium), the FNT file is downloaded properly with a .fnt file extension. If, for whatever reason, your browser gives it a .txt extension instead, you can just rename the file!

You have to make sure that both files have the same base name before the extension, for example my_font.fnt must have an accompanying PNG file named my_font.png.