Creating icon font for Presto

In the latest firmware for Presto, the included main.py demo switched from using polygon paths for the icons, to using a font to render the icons. The included font file is called “Roboto-Medium-With-Material-Symbols.af” so it is a combination of Roboto with what I presume to be a selected few icon glyphs from Material symbols.

I am interested in using this same approach in my own apps, so I tried using the included font in my own scripts but using different code points (that can be looked up in Material symbols website), but I can only get the same icons that are used in the original main.py to work (hence the mentioned “ I presume to be a selected few icon glyphs”).

Does anybody know how I can build my own font file with the icons I want?

I have already looked into the alright-fonts project GitHub - lowfatcode/alright-fonts: The font format designed for embedded and low resource platforms.

And I tried to create my own with their command line tool, by downloading Material symbols ttf file and then calling the afinate tool on command line, for example like this (to get the arrow back icon):

./afinate --characters $'\ue5c4' --font MaterialSymbolsOutlined-Regular.ttf material-test.af

But it gives this output:

> loading font MaterialSymbolsOutlined-Regular.ttf
  - bounding box -1.567901234567901, -11.88991769547325 -> 126.99999999999999, 125.56275720164608
  - scale factor 0.131
> extracting 1 glyphs
  \u58820 missing or not printable, skipping
> write output file in <built-in function format> format
No printable glyphs - stopping.

Trying to output normal characters works and also referencing them with code points, e.g. this works to output “A”:

./afinate --characters $'\u0041' --font MaterialSymbolsOutlined-Regular.ttf material-test.af
> loading font MaterialSymbolsOutlined-Regular.ttf
  - bounding box -1.567901234567901, -11.88991769547325 -> 126.99999999999999, 125.56275720164608
  - scale factor 0.131
> extracting 1 glyphs
  \u0065 'A' :  2 contours /  11 points
> write output file in <built-in function format> format
  - header
  - glyph dictionary
  - glyph contours
> output file size 45 bytes and contains 1 characters (avg. 45 bytes per character)

Also, if I manage to get this icon stuff working, would be interested to know how to combine the icons with a regular font like Roboto, as the example one is done.

Ping @gadgetoid maybe you can help? (since looks like you did the commit that changed the example files)

Have you checked (e.g. with fontforge) that the ttf contains the relevant code-point?

Yes, looks good to me.

Looking at the source code of afinate, it executes chr(58820).isprintable()
which returns False. So the output of your program is correct from the perspective of the program but I think for the purpose this check does not make sense.

Hm, you might want to hack that program (it is within alright-fonts/python_alright_fonts/encoder.py at main · lowfatcode/alright-fonts · GitHub).

Thanks for the suggestion, that change gets rid of the error message.

Although I still wasn’t able to produce a working .af file. For some reason nothing shows on screen when I try using the generated font file in Presto (I even tried making one with just basic letters, still nothing). I have to look into it more when I have time. But thanks for the help anyway 👍

I finally got around to looking into this again, and managed to get it working.

The trick was to use the “16bit patched” forked version of alright-fonts made by Gatgetoid, which can be found here: GitHub - Gadgetoid/alright-fonts at feature/16bit-afinate

And with that in combination with @bablokb’s suggestion to hack out the isprintable check, I got a working result. Yay!

I still don’t know how to combine fonts from different sources, like the example one that has Roboto for normal text + specific Material icons. But I guess I can make this work, just need to print text with display.text() instead of vector.text() or maybe have two font files and set different one every time depending on if I want to print text or icons…

1 Like