U8g2 custom font : tutorial with Fony

Using Arduino Displays
#1

Hi,
I use successfully U8g2 with an Oled SH1106 128x64 . But the Bluetooth symbol I currently use does not look great on my display and I wanted to change it. I could not find any other so I decided to create my own.

I succeeded to display my custom font with some trouble. I share this to help others.

I currently use the Blueetoth symbol from the font "u8g2_font_open_iconic_embedded_2x_t". Glyph at 74. fntgrpiconic · olikraus/u8g2 Wiki · GitHub

My existing code :

u8g2.setFont(u8g2_font_open_iconic_embedded_2x_t);  
u8g2.drawGlyph(x0, y0+1, 74);

To create my own font, I followed the guide here in the FAQ where you find links for all the tools.

I created with Fony a new font with a single BT symbol Height 16 width 12.

To create the font in Fony :
File > New
-give it a name
-a height pixel. 16 in my case
-Ascent : 16. needs to be the same as height to display the glyph as usual with u8g2. Otherwise it will not be aligned.
-First char : 32. mandatory because of the parameters that will be used later with bdfconv.
-Last char : 33 in my case. Depends how many glyphs you want in your font. I am happy with 2 because I think of another glyph I will need soon.

The "more" and "Fon" tabs can remain by default

Then draw your glyphs with the Fony editor. This is straight forward. Don't forget to enlarge the width to fit what you need.

718×560 59.5 KB

Once you are done with drawing,
File -> export as BDF . It will ask for a filename, in my case to BT.bdf

Then convert the bdf to c with the bdfconv command line as explained in the FAQ

bdfconv -f 1 -m "32-255" -n BT_font -o BT_font.c BT.bdf

This creates the BT_font.c file. Mine looks like this :

/*
  Fontname: BT
  Copyright: alka
  Glyphs: 2/2
  BBX Build Mode: 0
*/
const uint8_t BT2_font[62] U8G2_FONT_SECTION("BT_font") = 
  "\2\0\3\2\4\4\2\1\5\11\17\0\0\0\0\0\0\0\0\0\0\0! \32\370\347\313\1\71I\243"
  "$\312\222R\246\244\226,\211\222(+\205I*\207\0!\5\0\346\0\0\0\0\4\377\377\0";

I copied the full const definition in my .ino file along with other declarations and changed my code like this :
The "BT" glyph is at position 32 given how I created my font.

u8g2.setFont(BT_font); 
u8g2.drawGlyph(x0, y0+1, 32);

works great :slight_smile:

#2

.

#3

Surely you would treat it as a regular icon or monochrome bitmap.
e.g. edit with any Paint program, IrfanView, ...
save as .BMP, .JPG, .PNG
convert to XBM or Adafruit bitmap array.

Some PC programs let you store uint8_t arrays directly.
But the online JPG / BMP /PNG converters are easy to use.

You don't often type sentences with a BlueTooth symbol as part of the text.

It seems a lot of effort to create a Custom Font that contains a single character.
And have to change to this Font to render it. Then change back to regular Text Font.

David.

#4

Thanks for you reply. I found how to do it with Fony. I edited the first post and changed the topic to a tutorial with Fony instead of a question :slight_smile:

Drawing a BT symbol was the easiest part. Fony is great to design DIY glyphs.
I control an audio device and need symbols for the inputs like BT, Analog, Coax or Toslink. These are not usual. It is easy to create them by myslef and put them in a single font.

#5