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.

fonts

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.

font

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.

MikroElektronica

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).

64 pixel high screenIn 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.

Facebooktwittergoogle_pluspinterestlinkedin

5 thoughts on “Fonts Galore

  1. It looks like the MikroElektronika Convertor is truncating pixel positions instead of rounding: the "Power" icon should be symmetric, it isn't.

    1. For speed I used quite a low-res small font size but as you'll see in the image I've just added (refresh your screen perhaps) the power icon is just fine as are others. I've yet to see a simpler, better while free alternative to the MikroElektronica convertor.

  2. In speaking about fonts, is there away to use different fonts in the Ardunio IDE. I have a 3.2" screen on top of a shield on top of a Mega and the sketch uses

    tern uint8_t SmallFont[];
    extern uint8_t BigFont[];
    //extern uint8_t SevenSegNumFont[];

    and the display is hard to read.

    I was wondering if there are different fonts available? I can't seem to find much on this.

    The image is in focus.

    1. No idea Scott as I only use the Arduino version occasionally - the Arduino as against ESP has less resources and so I would imagine that storing fonts is a bit of an issue... from my notes here, clearly it is possible to convert TTF fonts into C arrays - but finding space for those arrays is another matter. The code to actually display them isn't rocket science as you see. However the Arduino is also notably slower than the ESP which might affect things.

  3. The MikroElektronika Font convertor has issues with font glyph numbers.. if they are up way above 256 (in some fonts, icons start up at 0xf000 or thereabouts), it will show the characters, let you edit them but when you come to save them - it only saves the first character. It has support for a later font format but I'm damned if I can figure it out. Needs work but it's free and they do a commercial product so I doubt it will get fixed. I'm currently expanding the icons but splitting over several fonts with a limit of 62 icons per font. I realised the above has no-where near enough weather icons.

Leave a Reply

Your email address will not be published. Required fields are marked *