Fonts Galore

In recent previous articles I’ve been working with various displays and various processors – and one thing that comes to the fore is the importance of fonts. TTF fonts are pretty useless for small microprocessor projects as the processing overhead can be significant – and though there are many standards out there – if you want to do this all without spending money – choices are limited. In addition to that, when it comes to icons – the chances of finding a readymade font with all the stuff you need and none of the stuff you don’t need – are pretty slim.

Thankfully the free software out there is limited in quantity, not quality. Many of the apps you see out there use fonts for the WEB – with CSS and other stuff to make it all work. In an embedded app you probably don’t have that option – ideally all you want is an array of the bitmap – and you need to be able to easily convert whatever  information you have into points on an LCD or OLED screen. Well,  I’ve cracked all that now and it is easy – read on.

So my first step to font nirvana was discovering the free and easy to use MikroElektronika GCLD font convertor which takes in a system font from your PC (TTF) and converts it to code for your project – in my case a C array.  I’ve described elsewhere how this format works – it is not complicated and I can easily put this C array info into FLASH (as against RAM) – and so for example on the ESP8266 it is no problem to shove a few fonts into FLASH. As noted, I also wrote some code which I’ve detailed which can put these C array fonts onto a screen – the sticking point being the pixel writing command and that varies from system to system – but the actual format of the GCLD fonts is very simple once you know how – so I’m happy to use this as a base. But how to get fonts with the stuff you want in them?

I found a great TTF font with weather icons – way more than I need – and at least half of the items I had no use for.

Fontastic is a free web application which easily creates custom TTF fonts for you. It even has some standard icon libraries already in there. But not my weather font icons.  But I noted that Fontastic can import SVG fonts so I went looking for a TTF to SVG font free online convertor and found it here. It works and is fast and simple to use. I ran the weather icon font through the convertor and pulled the result into Fontastic.  I now have a screen in front of me with endless icon shapes which I can import into my “ultimate” font for use with my LCDs and OLEDs.

So here is the font I’ve made so far and it’s mappings.. these suit my purposes – others might need completely different icons.

I saved this TTF file, gave it a decent name – petesfont.ttf and installed it in the normal way on my PC. The font is then available to the MikroElektronika convertor.

So – that gets fed into the MikroElektronika Convertor – out pops a C array.  For ease of use I add 3 bytes to the start of that data – i.e. the width and height (not in pixels but the maximum width and height of the font – because actual height will be padded out to the nearest byte – and I also add the ASCII offset for the first character – in some cases that might be 32 (space) – in other cases it might be 48 (“0” character).

In the example above I was using only 16pixel wide font size but as you see in the example below, a font size of 24 pixels or more gives a reasonable image – as seen on this 64-pixel high screen. Here the power icon looks just fine.

The format of the C code (or whatever output format you choose) is simple. The first byte in each row is the space in pixels between the current character and the next one (you could make it fixed but it often then wastes a lot of space).  Then comes the actual pixel info. It is expected that you will read X bytes – where X is the number of pixels DOWN for a character, rounded up to the nearest byte (hence the need to store the ACTUAL maximum character height) – and then that is repeated for the width.

Simples.