Configure LVGL Fonts

This topic describes how to configure LVGL fonts.

Declare and reference a font

In the .c file where the font is needed, add LV_FONT_DECLARE(font_name) to reference the font. Then, use lv_obj_set_style_text_font() to set the font for an LVGL object, or use lv_style_set_text_font() to set the font for a style.

Use fonts in local files

1. Place the font file (such as FONT_SY_20.c) in the directory: apps/tuyaos_demo_ai_toy/src/display/FONT_SY_20.c. Declare the font FONT_SY_20 using LV_FONT_DECLARE as shown in the figure below. This makes the font available in the file where it is declared.

   

2. Configure the font as shown in the example below:

   lv_obj_set_style_text_font(main_cont, AI_MESSAGE_FONT, 0); //AI_MESSAGE_FONT is a macro definition, equivalent to &FONT_SY_20.
   

Use fonts in global files

The effect of using a font in a global file is the same as using an LVGL system font. The operation is as follows:

1. In the vendor/T5/t5_os/components/lvgl/lvgl_v8/lv_conf.h file, modify the macro definition LV_FONT_CUSTOM_DECLARE LV_FONT_DECLARE. For example, modify it to #define LV_FONT_CUSTOM_DECLARE LV_FONT_DECLARE(FONT_SY_20).

   

2. Add compilation conditions. Add the lvgl_v8/src/font/FONT_SY_20.c field in the vendor/T5/t5_os/components/lvgl/CMakeLists.txt file.

   

3. Configure the font as shown in the example below. Once set up, the font can be used in any file that includes lvgl.h (#include "lvgl.h").

   lv_style_set_text_font(&my_style, LV_STATE_DEFAULT, &FONT_SY_20); /* Set a larger font */
   

   The font name is not the name of the font file, but the name set by const lv_font_t in the font file. Therefore, modifying the font file name does not change the font name synchronously.
   

Create custom fonts

You can download and use the LvglFontTool utility to create custom fonts. LvglFontTool is a widely-used font generation tool for LVGL. It enables users to generate font files compatible with LVGL from various font libraries, based on specific project requirements and at designated font sizes.

For instructions on how to create custom fonts, refer to Font Converter - LVGL.

Modify the default font

To modify the default font, you can add the LV_FONT_DEFAULT macro definition in the lv_conf.h file. For example, within the T5 platform’s source tree (e.g., in the file vendor/T5/t5_os/components/lvgl/lvgl_v8/lv_conf.h), you can set the default font to LV_FONT_MONTSERRAT_14.

#define LV_FONT_DEFAULT &lv_font_montserrat_14

Add custom symbols

Due to the limited space on embedded devices, using font-based icons can significantly enrich the user interface while controlling ROM usage. While LVGL includes a set of built-in icons, these might not always meet specific project requirements during practical application. Therefore, it becomes necessary to add custom symbols to LVGL based on actual needs.

The icons included in LVGL’s built-in font library are listed below:

For example, if you want to display a volume symbol within a label, you can refer to the following code snippet. (When using LVGL’s built-in symbols, make sure the current object uses an LVGL built-in font. Otherwise, display might fail.)

lv_obj_set_style_text_font(label_valume, &lv_font_montserrat_16, 0);//Make sure an LVGL built-in font is used.
lv_label_set_text(label_valume, LV_SYMBOL_VOLUME_MAX);

Font Awesome provides thousands of symbols for you to choose from. Taking the Accusoft icon as an example, navigate to its details page to find its Unicode value.