Example Code for Arduino-Multiple Font Display
Last revision 2026/01/19
This article guides you through setting up and displaying multiple fonts on an Arduino using an OLED display module. It covers necessary hardware and software preparations, provides detailed wiring diagrams, and includes sample code for font rendering using the U8g2 library. Perfect for enhancing visual output in Arduino projects.
Hardware Preparation
- ESP32-E (or similar) x 1
- 1.51" Transparent OLED Display Module x1
- Dupont Wires
Software Preparation
- Arduino IDE
- Download and install the U8g2 Arduino Library. (About how to install the library?)
Wiring Diagram

Wiring Detail Diagram:


Note: You can refer to the FPC cable color to access the correct position.
Other Preparation Work
- Demos are stored in
U8g2_Arduino-master > DFRobot_Demo > 1.51 inch OLED12864-SSD1309.

- Ensure the correct U8G2 function is enabled in the code.
- select the library
Sample Code
/*!
* @file Font.ino
* @brief Show several U8G2-supported fonts
* @n U8G2 supports multiple fonts, and this demo is just a few fonts to display
* @n U8G2 Font GitHub Link:https://github.com/olikraus/u8g2/wiki/fntlistall
*
* @copyright Copyright (c) 2010 DFRobot Co.Ltd (http://www.dfrobot.com)
* @licence The MIT License (MIT)
* @author [Ivey]([email protected])
* @maintainer [Fary]([email protected])
* @version V1.0
* @date 2019-10-15
* @url https://github.com/DFRobot/U8g2_Arduino
*/
#include <Arduino.h>
#include <U8g2lib.h>
#include <SPI.h>
/*
* Display hardware IIC interface constructor
*@param rotation:U8G2_R0 Not rotate, horizontally, draw direction from left to right
U8G2_R1 Rotate clockwise 90 degrees, drawing direction from top to bottom
U8G2_R2 Rotate 180 degrees clockwise, drawing in right-to-left directions
U8G2_R3 Rotate clockwise 270 degrees, drawing direction from bottom to top
U8G2_MIRROR Normal display of mirror content (v2.6.x version used above)
Note: U8G2_MIRROR need to be used with setFlipMode().
*@param reset:U8x8_PIN_NONE Indicates that the pin is empty and no reset pin is used
* Display hardware SPI interface constructor
*@param Just connect the CS pin (pins are optional)
*@param Just connect the DC pin (pins are optional)
*
*/
#if defined ARDUINO_SAM_ZERO
#define OLED_DC 7
#define OLED_CS 5
#define OLED_RST 6
/*ESP32 */
#elif defined(ESP32)
#define OLED_DC D2
#define OLED_CS D6
#define OLED_RST D3
/*ESP8266*/
#elif defined(ESP8266)
#define OLED_DC D4
#define OLED_CS D6
#define OLED_RST D5
/*AVR series board*/
#else
#define OLED_DC 2
#define OLED_CS 3
#define OLED_RST 4
#endif
U8G2_SSD1309_128X64_NONAME2_1_4W_HW_SPI u8g2(/* rotation=*/U8G2_R0, /* cs=*/ OLED_CS, /* dc=*/ OLED_DC,/* reset=*/OLED_RST);
void setup(void)
{
u8g2.begin(); //Initialize the function
u8g2.setFontPosTop(); /**When you use drawStr to display strings, the default criteria is to display the lower-left
* coordinates of the characters.The function can be understood as changing the coordinate position to the upper left
* corner of the display string as the coordinate standard.*/
}
void draw(int a )
{
switch(a)
{
case 0:
u8g2.setFont(u8g2_font_bubble_tr ); //Set the font set, which is“u8g2_font_bubble_tr“
u8g2.drawStr(/* x=*/0,/* y=*/0, "DFR123"); //Start drawing strings at the coordinates of x-0, y-0 “DFR123”
u8g2.setFont(u8g2_font_lucasarts_scumm_subtitle_o_tf );
u8g2.drawStr(0, 25, "DFR123");
u8g2.setFont(u8g2_font_HelvetiPixelOutline_tr );
u8g2.drawStr(0, 45, "DFR123");
break;
case 1:
u8g2.setFont(u8g2_font_tenstamps_mr );
u8g2.drawStr(0,0, "DFR123");
u8g2.setFont(u8g2_font_jinxedwizards_tr );
u8g2.drawStr(56, 16, "DFR123");
u8g2.setFont(u8g2_font_secretaryhand_tr );
u8g2.drawStr(0, 32, "DFR123");
u8g2.setFont(u8g2_font_freedoomr10_mu );
u8g2.drawStr(56, 48, "DFR123");
break;
}
}
void loop()
{
for( int i = 0; i <2 ; i++)
{
/*
* firstPage will change the current page number position to 0
* When modifications are between firstpage and nextPage, they will be re-rendered at each time.
* This method consumes less ram space than sendBuffer
*/
u8g2.firstPage();
do
{
draw(i);
} while( u8g2.nextPage() );
delay(2000);
}
}
Was this article helpful?
