How to create and edit fonts for the Adafruit GFX library?

Question

I noticed that the TomThumb.h font included in the Adafruit GFX library has characters that have different widths, which is a problem for me because I'm doing text processing that requires characters to have the same dimensions (width and height).

I also noticed that the TomThumb.h font misses some characters (such as '). I need a way to create/edit fonts for the Adafruit GFX (where I'm using the Adafruit_ST7735 on a 1.8" TFT display). I've looked around the internet but I couldn't find anything decent.

• Majenko: The library comes with a number of fonts. The ones named *Mono* are monospaced, which means that all the characters are the same size.
• JingleBells: @Majenko Interesting. I thought that by default all characters are required to take equal dimensions.
• Majenko: Nope. Each character in the font ("glyph") specifies the dimensions and offset of the character, and also the "advance" - how far to move the cursor after printing the character.
• JingleBells: @Majenko I'm surprised there isn't an easy way to create fonts for the Adafruit GFX. It's a relatively supported and used library.
• Majenko: I have various utilities for DisplayCore, but DisplayCore doesn't run on an Arduino.

Answer 1

I found an online editor that can parse Adafruit GFX font headers, modify, and export the result to create a new font header. It works very well. May be a bit late to help OP, but for anyone else looking...

It uses regexes to extract info from the header files, so it's pretty strict on following the layout of GFX font headers provided by Adafruit.

webpage: https://tchapi.github.io/Adafruit-GFX-Font-Customiser/
github: https://github.com/tchapi/Adafruit-GFX-Font-Customiser

• Jack O'Flaherty: That works nicely, once you figure it out.

Answer 2

One possible solution you might already have: There’s a small utility called fontconvert that’s part of the Adafruit GFX library. The source code is installed by default together with the Adafruit GFX library in Arduino/libraries/Adafruit_GFX_Library/fontconvert You need Linux to compile it from the provided source code. It also compiles and runs on a Raspberry Pi.

It takes care of converting TrueType fonts (completely or partially) to Adafruit GFX format. There’s some documentation on compiling and using it in the fontconvert directory.

• JingleBells: Thanks, I found it. Unfortunately, I don't have a Linux nor a Raspberry Pi. I could install a Linux VM. Isn't there an easier way? Like, some tool where you put the individual pixels for each character.
• StarCat: Well, there’s This. I don’t know how useful this is for you, but you could take a look at it.
• JingleBells: Thanks, I'll take a look. I hope it'll do the job

Answer 3

I have used this website to generate various fonts, sizes, etc. with success.

http://oleddisplay.squix.ch/#/home

Answer 4

I have used truetype2gfx - Converting fonts from TrueType to Adafruit GFX.

It can make various sizes to a complete standard font.

• VE7JRO: @ocrdu - did you visit the website and try out the "tool"? How did it work for you?

Answer 5

I had the same issue. When using the custom fonts, numbers were overwriting the previous one.

I suggest you to use "canvas". Canvas is a defined area on the screen, and you can easily clear it without flickering. If you wanna see an example, visit below links:

Github - no flicker!

Youtube Video

 #include <Adafruit_GFX.h> //including the Adafruit GFX library
 #include <Adafruit_ST7735.h> //including the Adafruit ST7735 library
 #include <spi_flash.h>
 
 #define TFT_CS 15 //defining Pins
 #define TFT_RST 0 //defining Pins
 #define TFT_DC 2 //defining Pins
 
 Adafruit_ST7735 tft = Adafruit_ST7735(TFT_CS, TFT_DC, TFT_RST); //setting the LCD with Pins defined.
 
 #include "Robot_Kicks_Italic20pt7b.h" // This is the custom font implemented.
 
 GFXcanvas16 canvas(160, 64); //Canvas is created for the specified area which is 160x64 pixels.
 
 
 void setup() 
 {
 tft.initR(INITR_BLACKTAB); //initializing the TFT Screen
 tft.setRotation(3); // Setting the rotation 
 tft.fillScreen(ST7735_BLACK); // filling the screen with black color.
 
 canvas.setFont(&Robot_Kicks_Italic20pt7b); //setting the custom Font to canvas to use.
 canvas.setTextWrap(false); // setting for wrapping (false)
 
 }
 
 void loop() 
 {
 
 
 for(int i = 0; i <= 1000; i++) //counter starts from 0 to 1000
 {
 canvas.fillScreen(ST7735_BLACK); //fill only the defined canvas, not the whole screen. 
 canvas.setTextColor(ST7735_GREEN); // setting the font color to green
 canvas.setCursor(12, 30); // Pos. is BASE LINE when using fonts!
 canvas.print(i); //printing "i" from one to 1000
 tft.drawRGBBitmap(0, 45, canvas.getBuffer(), canvas.width(), canvas.height()); // this line pushes the entire thing above to the specified area, canvas.
 
 delay(25); //this is the delay of mili seconds for each element in the counter.
 }
 
 
 }