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.

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.

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.

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.

Welcome to the Blog

Hi - I'm Pete and this is my technology blog. It is BIG. It is also the home of "ESP-GO". "The Script", Node-Red-Contrib-Bigtimer and many other useful toys. Use the search box below or check out the archives and other links below - be sure to SHARE what you like using the social media buttons and please subscribe to my YouTube channel http://www.youtube.com/PeterScargill

Please register or log in - the top menu changes a lot when you are part of the party... and once in, don't forget to tick the box so you will get email follow-ups to comments.

If you want to buy me a coffee or help fuel my gadget habit, use the Paypal donate link below.

Disclaimer: Because I have no idea of your level of technical skill or the requirements of your country laws in terms of electricity supply etc., I accept no responsibility for any damage caused through following advice in these pages. When dealing with mains voltages you should satisfy yourself that whatever you are doing is safe and if unsure, seek advice from someone who is sure.

Notice: I'm always happy to offer advice on stuff I've written - and indeed take advice. If I can help in any way just let me know but PLEASE don't ask me how to program in C/PASCAL/NODE/etc. There are many resources out there - if you want to program and can't - there's always Google.

Search for:

Email Newsletter

Enter a name and your real email address if you would like to receive occasional summary emails - sorry but invalid-looking or automated names and email addresses will be removed to help protect others.

Links

EE Times | Electronic Engineering TimesEE Times connects the global electronics community through news, analysis, education, and peer-to-peer discussion around technology, business, products and design