Arduino Fonts for ILI9341

Arduino Fonts for LCD
How to convert a font and used them on ILI9341 240x320 LCD

In many of my projects I use Arduino and LCD
In this project I will explain how to use any fonts for your LCD projects.
I will show how to convert fonts and how to put them into your code.
My code will be explained in basic details so anyone can understand and folow the ride.

Features:

Convert any font to match Arduino

How to drive the ILI9341 Display (You can of course use other LCD)

How to print text with any font

How to handle RGB565 color

All contribution to this page are most welcome!

Background
I really enjoy using LCD display to my projects, it gives a cool look and useful interface.
The downside is that it can be difficult to get it working and specially if you want to use a non standard fonts.

This page will show example of Arduino-code and you will also find the tools and Libraries you need.
Now let's begin.

First you need to create a new map. I place my map under root directory c:\, I named my map "Myfont"
Now, we need to find a font we want to use. Here is a good link for free fonts: www.dafont.com
In this example, I found a font called Liquid. Save the font to the map "Myfont"

Then download FontConvert.rar and unrar it into the same map
This is how it should look inside the map.

Fontconverter.exe must be run in the CMD window, so lets open that by clicking Windows Key + R, then type "cmd".
Now, you must go to the map Myfont
type "cd.." until you reach top root, in my case C:\
The type "cd Myfont" to enter that map

In my example I will create a font with size 18, I want to convert only number and two more chars (dot and slash).
I only want to convert char from ASCII 46 to ASCII 56 because I want to save memory and I will not use any letter.

type fontconvert liquid.otf 18 46 57 >liquid.h

(If you type fontconvert liquid.otf 18 >liquid.h, all chars will be converted.)

Now, if you look into the map you will find a file labelled liquid.h
This file will be included into your Arduino code. I will later show how to do it.

Lets have a look inside the file liquid.h.
The fist line say "const uint8_t liquid18pt7bBitmaps[] PROGMEM = {"
This means that the font is saved into the FLASH memory instead of the SRAM, which is good since you save SRAM

Another important thing is the name of the font which is liquid18pt7b not liquid18pt7bBitmaps, so
later on in our code where we want to use this font we will use the name liquid18pt7b.
Then comes all graphic information about each char

At the bottom you will find data for fonts representing char 46 to char 57...not much more to say about this.

const uint8_t liquid18pt7bBitmaps[] PROGMEM = {
  0x5F, 0xA0, 0x00, 0x06, 0x00, 0x0C, 0x00, 0x38, 0x00, 0x70, 0x01, 0xC0,
  0x03, 0x80, 0x0E, 0x00, 0x1C, 0x00, 0x70, 0x01, 0xE0, 0x03, 0x80, 0x07,
  0x00, 0x0C, 0x00, 0x18, 0x00, 0xC0, 0x03, 0x80, 0x07, 0x00, 0x1E, 0x00,
  0x38, 0x00, 0xF0, 0x01, 0xC0, 0x07, 0x00, 0x0E, 0x00, 0x38, 0x00, 0x70,
  0x01, 0xC0, 0x03, 0x80, 0x06, 0x00, 0x00, 0x1F, 0xF8, 0x3F, 0xFC, 0x5F,
  0xFA, 0xE0, 0x07, 0xE0, 0x07, 0xE0, 0x07, 0xE0, 0x07, 0xE0, 0x07, 0xE0,
  0x07, 0xE0, 0x07, 0xE0, 0x07, 0xE0, 0x07, 0xE0, 0x07, 0x40, 0x02, 0x40,
  0x02, 0xE0, 0x07, 0xE0, 0x07, 0xE0, 0x07, 0xE0, 0x07, 0xE0, 0x07, 0xE0,
  0x07, 0xE0, 0x07, 0xE0, 0x07, 0xE0, 0x07, 0xE0, 0x07, 0x5F, 0xFA, 0x3F,
  0xFC, 0x1F, 0xF8, 0x08, 0x73, 0xDF, 0xFF, 0xFD, 0xC7, 0x1C, 0x71, 0xC7,
  0x1C, 0x20, 0x87, 0x1C, 0x71, 0xC7, 0x1C, 0x71, 0xC7, 0x1C, 0x71, 0xC2,
  0x1F, 0xF8, 0x3F, 0xFC, 0x5F, 0xFA, 0xE0, 0x07, 0xE0, 0x07, 0x60, 0x07,
  0x00, 0x07, 0x00, 0x07, 0x00, 0x07, 0x00, 0x07, 0x00, 0x07, 0x00, 0x07,
  0x00, 0x07, 0x1F, 0xFA, 0x3F, 0xFC, 0x5F, 0xF8, 0xE0, 0x00, 0xE0, 0x00,
  0xE0, 0x00, 0xE0, 0x00, 0xE0, 0x00, 0xE0, 0x00, 0xE0, 0x00, 0xE0, 0x00,
  0xE0, 0x00, 0xDF, 0xF8, 0xBF, 0xFC, 0x7F, 0xFE, 0xFF, 0xF1, 0xFF, 0xF1,
  0xFF, 0xF0, 0x00, 0x70, 0x00, 0xE0, 0x01, 0xC0, 0x03, 0x80, 0x07, 0x00,
  0x0E, 0x00, 0x1C, 0x00, 0x38, 0x00, 0x70, 0x00, 0xE3, 0xFF, 0x8F, 0xFE,
  0x0F, 0xFE, 0x00, 0x0E, 0x00, 0x1C, 0x00, 0x38, 0x00, 0x70, 0x00, 0xE0,
  0x01, 0xC0, 0x03, 0x80, 0x07, 0x00, 0x0E, 0xFF, 0xFB, 0xFF, 0xE3, 0xFF,
  0x80, 0x00, 0x02, 0x00, 0x07, 0x60, 0x07, 0xE0, 0x07, 0xE0, 0x07, 0xE0,
  0x07, 0xE0, 0x07, 0xE0, 0x07, 0xE0, 0x07, 0xE0, 0x07, 0xE0, 0x07, 0xE0,
  0x07, 0x5F, 0xFA, 0x3F, 0xFC, 0x1F, 0xFA, 0x00, 0x07, 0x00, 0x07, 0x00,
  0x07, 0x00, 0x07, 0x00, 0x07, 0x00, 0x07, 0x00, 0x07, 0x00, 0x07, 0x00,
  0x07, 0x00, 0x07, 0x00, 0x07, 0x00, 0x07, 0x00, 0x02, 0x7F, 0xFE, 0xBF,
  0xFC, 0xDF, 0xF8, 0xE0, 0x00, 0xE0, 0x00, 0xE0, 0x00, 0xE0, 0x00, 0xE0,
  0x00, 0xE0, 0x00, 0xE0, 0x00, 0xE0, 0x00, 0xE0, 0x00, 0xE0, 0x00, 0xDF,
  0xF8, 0x3F, 0xFC, 0x1F, 0xFA, 0x00, 0x07, 0x00, 0x07, 0x00, 0x07, 0x00,
  0x07, 0x00, 0x07, 0x00, 0x07, 0x40, 0x07, 0xE0, 0x07, 0xE0, 0x07, 0x5F,
  0xFA, 0x3F, 0xFC, 0x1F, 0xF8, 0x1F, 0xF8, 0x3F, 0xFC, 0x5F, 0xF8, 0xE0,
  0x00, 0xE0, 0x00, 0xE0, 0x00, 0xE0, 0x00, 0xE0, 0x00, 0xE0, 0x00, 0xE0,
  0x00, 0xE0, 0x00, 0xE0, 0x00, 0xE0, 0x00, 0xDF, 0xF8, 0x3F, 0xFC, 0xDF,
  0xFA, 0xE0, 0x07, 0xE0, 0x07, 0xE0, 0x07, 0xE0, 0x07, 0xE0, 0x07, 0xE0,
  0x07, 0xE0, 0x07, 0xE0, 0x07, 0xE0, 0x07, 0x5F, 0xFA, 0x3F, 0xFC, 0x1F,
  0xF8, 0x7F, 0xFF, 0xFF, 0xF7, 0xFF, 0x80, 0x02, 0x00, 0x08, 0x00, 0x60,
  0x01, 0x80, 0x0E, 0x00, 0x38, 0x01, 0xC0, 0x07, 0x00, 0x18, 0x00, 0x60,
  0x01, 0x00, 0x30, 0x00, 0xC0, 0x07, 0x00, 0x1C, 0x00, 0xF0, 0x03, 0x80,
  0x1E, 0x00, 0x70, 0x03, 0xC0, 0x0E, 0x00, 0x70, 0x01, 0xC0, 0x06, 0x00,
  0x18, 0x00, 0x1F, 0xF8, 0x3F, 0xFC, 0x5F, 0xFA, 0xE0, 0x07, 0xE0, 0x07,
  0xE0, 0x07, 0xE0, 0x07, 0xE0, 0x07, 0xE0, 0x07, 0xE0, 0x07, 0xE0, 0x07,
  0xE0, 0x07, 0xE0, 0x07, 0x5F, 0xFA, 0x3F, 0xFC, 0x5F, 0xFA, 0xE0, 0x07,
  0xE0, 0x07, 0xE0, 0x07, 0xE0, 0x07, 0xE0, 0x07, 0xE0, 0x07, 0xE0, 0x07,
  0xE0, 0x07, 0xE0, 0x07, 0x5F, 0xFA, 0x3F, 0xFC, 0x1F, 0xF8, 0x1F, 0xF8,
  0x3F, 0xFC, 0x5F, 0xFA, 0xE0, 0x07, 0xE0, 0x07, 0xE0, 0x07, 0xE0, 0x07,
  0xE0, 0x07, 0xE0, 0x07, 0xE0, 0x07, 0xE0, 0x07, 0xE0, 0x07, 0xE0, 0x07,
  0x5F, 0xFB, 0x3F, 0xFC, 0x1F, 0xFB, 0x00, 0x07, 0x00, 0x07, 0x00, 0x07,
  0x00, 0x07, 0x00, 0x07, 0x00, 0x07, 0x00, 0x07, 0x00, 0x07, 0x00, 0x07,
  0x1F, 0xFA, 0x3F, 0xFC, 0x1F, 0xF8 };

const GFXglyph liquid18pt7bGlyphs[] PROGMEM = {
  {     0,   3,   4,   5,    1,   -3 },   // 0x2E '.'
  {     2,  15,  28,  18,   -1,  -27 },   // 0x2F '/'
  {    55,  16,  28,  18,   -1,  -27 },   // 0x30 '0'
  {   111,   6,  28,  18,    4,  -27 },   // 0x31 '1'
  {   132,  16,  28,  18,   -1,  -27 },   // 0x32 '2'
  {   188,  15,  28,  18,    0,  -27 },   // 0x33 '3'
  {   241,  16,  28,  18,   -1,  -27 },   // 0x34 '4'
  {   297,  16,  28,  18,   -1,  -27 },   // 0x35 '5'
  {   353,  16,  28,  18,   -1,  -27 },   // 0x36 '6'
  {   409,  14,  28,  18,    0,  -27 },   // 0x37 '7'
  {   458,  16,  28,  18,   -1,  -27 },   // 0x38 '8'
  {   514,  16,  28,  18,   -1,  -27 } }; // 0x39 '9'

const GFXfont liquid18pt7b PROGMEM = {
  (uint8_t  *)liquid18pt7bBitmaps,
  (GFXglyph *)liquid18pt7bGlyphs,
  0x2E, 0x39, 37 };

// Approx. 661 bytes

Schematic ILI9341
Here is the schematic to connect the display to an Arduino.

Backside of the LCD display.

ILI9341 Adapter Board
To make connection easier, I have made an adapter board which will handle +5V to +3.3V and make wiring more easy.
A flat cable is connected to the pcb and it will be very easy to connect to the Arduino.
Below you will see pictures and schematic. (pcb can be found in my shop)

Arduino Software
First I advice you to learn how to use different tabs in Arduino IDE to organize your code.
It is very easy and here is a good Youtube link that explain how to do it.
Using tabs to organize code with the Arduino IDE

I will use two tabs, one is for my Arduino code and the next tab will contain the liquid.h font-data
In this way the code will be more simple to use and modify

Examine the Code
You can see the code below and you can also download the example.
The code begins with two #include libraries (Adafruit_GFX.h and Adafruit_ILI9341.h) for driving the display and the third #include points to my second tab wich contain data about the font.
The second tab I have is labelled Myfont.h and I past in all the code there from the conversion earlier "liquid.h"

Next part is to define the pinning of the ILI9341 and how to connect it to Arduino.
At the right you can find the schematic. Click on the pic to see full schematic.
The code then define the SPI interface to the LCD
Then comes the setup part. Here we init the display and I define the CE for the touch screen.
In this example I will not use the touch-screen part so I put this pin High to disconnect it.
I will explain how to use the touch-screen part in other project

In the loop section comes the control of the display. Let's go through that
First line is to set the orientation of the LCD. Next line is to fill the screen with black colour.
Then I define my font and I type "&liquid18pt7b". Remember the name issue I mentioned above. it must be "&liquid18pt7b" and not "&liquid18pt7bBitmaps"
I can not give full detail why to write like this, if you have this knowledge, please share it and I will put it here.

Then comes the colour of the text.
The colour is set by a standard called RGB565.
Here is a very good link to read about the standard and you can easy find any colour value there.
https://barth-dev.de/online/rgb565-color-picker/

I then set the position of the text (x, y) and the size 1, which will give standard 18p as I created it.
Finally I print some text. I then change colour and print more text with size 2.

You can download the Arduino example below here FontExample.zip

/*
Filename: FontExample.ino
This Example will print text to the display using a new font.
The font is defined in the TAB Myfont.h
*/

// ==============================================================================================================
//                                              Include libraries
// ==============================================================================================================
#include "Adafruit_GFX.h"                                                       // Graphic Library
#include "Adafruit_ILI9341.h"                                                   // Graphic Library
#include "Myfont.h"                                                             // New font

// ==============================================================================================================
//                                              Define Pins ILI9341 Setup
// ==============================================================================================================
// Define pins used by Arduino to control the LCD
#define TFT_DC 8                                                                // Define which pin LCD DC use
#define TFT_CS 10                                                               // Define which pin LCD CS use
#define TFT_RST 9                                                               // Define which pin LCD RST use

// Use hardware SPI (on Uno, #13, #12, #11) and the above for CS/DC
Adafruit_ILI9341 tft = Adafruit_ILI9341(TFT_CS, TFT_DC, TFT_RST);               // Define SPI pins

// ==============================================================================================================
//                                              Arduino Main Setup
// ==============================================================================================================
void setup() {
    tft.begin();                                                                // Init Display
  
//------------- Define Port Input/Output ------  
    pinMode (7, OUTPUT);                                                        // Define pin for CE touch-screen  
    
//------------- Set Pin High/Low --------------  
    digitalWrite(7,HIGH);                                                       // Disconnect touch-screen  
}
// ==============================================================================================================
//                                              Arduino Main Loop
// ==============================================================================================================
void loop(void) {

    tft.setRotation(1);                                                         // Set rotation of the Display
    tft.fillScreen(ILI9341_BLACK);                                              // Clear the screen 
    tft.setFont(&liquid18pt7b);                                                 // Use the new font

    tft.setTextColor(0x16FF);                                                   // Set color
    tft.setCursor(70, 80);                                                      // Define position to put the text
    tft.setTextSize(1);                                                         // Set size of the text
    tft.println("0123456789");                                                  // Write some text

    tft.setTextColor(0xFFFF);                                                   // Set color
    tft.setCursor(50, 180);                                                     // Define position to put the text
    tft.setTextSize(2);                                                         // Set size of the text
    tft.println("012345");                                                      // Write some text

  delay(10000);

       
}

Download Software here
GIT Hub : Adafruit_BusIO_Register GIT Hub : Adafruit_GFX GIT Hub : Adafruit_ILI9341 My Mirror : Adafruit_BusIO_Register.rar My Mirror : Adafruit_GFX.rar My Mirror : Adafruit_ILI9341.rar Arduino Example #1: FontExample.zip (2k) Arduino Example #1: FontExample.rar (2k) Convert font: FontConvert.rar Support #1: How to install Library Support #2: How to install Library

Final word
I hope you have enjoyed reading about this LCD project.
Hopefully you have found new inspiration for your own projects.
It was a bit struggle for me to learn how to make fonts and find all tools, therefore I made this page to help others.
If you like to offer me a cup of coffee, please hit the button below.

Back to main Page | Contact Me | Cheap components