LVGL Tutorial with ESP32, Custom fonts are essential in GUI!

The use of fonts is essential when we work on GUI. Headlines should be emphasized, and font size and style should change depending on the importance of the information. In this episode, we'll learn how to use a C file containing a glyph bitmap from a new font file.
[Source Code]
github.com/0015/ThatProject/t...
[LVGL 9, [Ep. 07] My Air Quality Sensor, How to update the screen with data obtained from sensors.]
• LVGL Tutorial with ESP...
[LVGL 9, [Ep. 06] My Air Quality Sensor, Draw IKEA UI]
• My Air Quality Sensor,...
[LVGL 9, [Ep. 05] Custom fonts are essential in GUI!]
• LVGL Tutorial with ESP...
[LVGL 9, [Ep. 04] Creating Interactive UI/UX Screens with LVGL 9 on ESP32: Implementing On-Screen Keyboard]
• LVGL Tutorial with ESP...
[LVGL 9, [Ep. 03] Creating Stunning UI on ESP32 with LVGL: A Step-by-Step Guide]
• LVGL Tutorial with ESP...
[LVGL 9, [Ep. 02], Examples, We can understand better and faster through LVGL Examples]
• LVGL Tutorial with ESP...
[LVGL 9, [Ep. 01], From Scratch to Benchmark, For newbie/beginner/starter]
• LVGL 9, [Ep. 01], From...
[LVGL Projects]
• ESP32 + LVGL Projects
[ESP32-S3-DevKitC-1-N8R8 Development Board]
amzn.to/3Smt1Gh
[MaTouch ESP32-S3 Parallel TFT with Touch 7“]
www.makerfabs.com/esp32-s3-pa...
#LVGL #Font #Tutorial #ESP32 #ThatProject

[@dhrubrawat9316]

great tutorial.

[@muhammadshahzaib3813]

Nice video as always,
Can you also make a video of making simple assets files that can be used with lvgl projects?

[@Yakroo108]

👍👍👍

[@zoli800]

could you make a video how to use arduino giga r1 and display with square line studio?

[@yakkook]

Psram을 사용하는 방법도 알려주세요. Esp32 s3 에서요

[@f7p1764]

can you use this font in sprites? Make scrolling line with transparent background?

[@ThatProject]

That's a good question. Are you trying to use a custom font in LovyanGFX rather than LVGL? (Because you mentioned using it on a sprite) I think you can use it on a sprite with a regular glyph bitmap type(not for LVGL) without issues.

[@FrankP83]

Hi man!I' don't know, but i've read that the lv_conf.h need to be changed as below :
*E.g. #define LV_FONT_CUSTOM_DECLARE LV_FONT_DECLARE(my_font_1) LV_FONT_DECLARE(my_font_2)*/
So, if i've 2 fonts i need to modify the lv_conf.h in this way :
#define LV_FONT_CUSTOM_DECLARE LV_FONT_DECLARE(myfont15) LV_FONT_DECLARE(myfont30)
Why you are not using this approach?
Anyway with the approach above, i've issue if i define two fonts , because there are all variables that are already available in the first font defined...
I want to declare the fonts just one time...this for me now is a problem...do you have any suggestion?!
Thanks in advance!

[@ThatProject]

/*Optional declare custom fonts here.
*You can use these fonts as default font too and they will be available globally.
*E.g. #define LV_FONT_CUSTOM_DECLARE LV_FONT_DECLARE(my_font_1) LV_FONT_DECLARE(my_font_2)*/
The above method allows you to use custom fonts in all of your projects. Using custom fonts depending on the project can prevent unnecessary memory waste.

[@FrankP83]

@@ThatProject if i use the approach in your video, in my case, doesn't work :/
I've two files where i use different fonts size.
in each file i've set the LV_FONT_DECLARE(FilMachineFontIcons_20.c),LV_FONT_DECLARE(FilMachineFontIcons_30.c) ecc ecc ...but i've got this error :
Library/Arduino15/packages/esp32/tools/xtensa-esp32s3-elf-gcc/esp-2021r2-patch5-8.4.0/bin/../lib/gcc/xtensa-esp32s3-elf/8.4.0/../../../../xtensa-esp32s3-elf/bin/ld: sketch/objs.a(TheBeginning.ino.cpp.o):(.literal.menu+0x14): undefined reference to `FilMachineFontIcons_20' , also for FilMachineFontIcons_30
If i include the FilMachineFontIcons_20.c in each file, i've another erro, a redifinition of same variables used in each font file, like the following : error: redefinition of 'const uint8_t glyph_bitmap []'
how can i solve this issue?!Thanks in advance! :)

[@FrankP83]

@@ThatProject I've solved, the issue was that the font.c files where in a inner folder called "resources"...not the main one with the .ino file.
How can i place the font.c files in an inner folder?
Thanks in advance!!

[@ThatProject]

@@FrankP83 Just copy the font file into your project the way I did. Also, LV_FONT_DECLARE() does not include the file extension.
LV_FONT_DECLARE(your_font_file_name_without_extension)