How to use latin characters ('ã', 'õ', 'ç', ...) in text labels (v.7.10.0)?

Description

I need to write some Brazilian portuguese phrases to give user instructions. These phrases contains latin characters like ‘ã’. ‘õ’, ‘ç’, ‘á’, among others.

What MCU/Processor/Board and compiler are you using?

X86 platform running linux and framebuffer driver.

What LVGL version are you using?

7.10.0

What do you want to achieve?

Properly present latin chracters into text labels.

What have you tried so far?

I’ve searched for UTF8 support and the capacity of rendering the aforementioned characters - but nothing promising found, looked into fonts source code but it seems that these characters are not included.

Hi,

Yes, if you use the “built in” fonts (lv_font_montserrat_xx), they only have plain ASCII characters (0x20 - 0x7f), degree and bullet signs (0xb0, 0x2022) and a selection of symbols from “Awesome” font (listed in “lv_symbol_def.h”).

So, the steps to take are:

Then, when creating strings, it depends on your editor. Some of them can save source as UTF-8, some will not. And then, some compilers might puke on UTF-8 characters. The foolproof way is to enter characters above 0x7f as hex - for instance “Temperature %d\xc2\xb0C”, in this example “\xc2\xb0” is UTF-8 representation of degree character (176 or 0xb0). Have a look at LV_SYMBOL_xxx definitions!

Final note: when using the online font converter, you might wish to save your character list somewhere, so that you can re-create the set when required (to create another size, for example). The offline version probably puts the list to the generated source, but I’ve never used that.

Hope this helps!

Hello @fernandoginez,

The builtin fonts support only basic latin characters, so you need to load your own font.

Either you create C file from your font, or convert any TTF/WOFF/OTF font to binary font which can be loaded runtime:
https://docs.lvgl.io/latest/en/html/overview/font.html#load-font-in-run-time

Font convert tool: https://github.com/lvgl/lv_font_conv/

To convert any font:

  1. Install lv_font_conv:
    npm i lv_font_conv -g
  2. Download any free font which you prefer (and has glyphs for your special characters).
  3. You can check the font (glyphs, supported characters) in online tool:
    https://www.glyphrstudio.com/online/
  4. Run command to convert downloaded font:
    lv_font_conv --font customfont.ttf --output customfont-20.bin --bpp 1 --size 20 --format bin --range 0x20-0x7F --no-compress
    You should of course change the value of --font, --output, --size and --range arguments to your needs. It is recommended to create different sizes of same font to see runtime, which font size is better in your project.
  5. Upload your converted .bin font to your device, and use it:
    https://docs.lvgl.io/latest/en/html/overview/font.html#load-font-in-run-time

Download free fonts:

1 Like