Custom font with symbols is not being rendered

Description

I’ve created a custom font using the online font converter. The font only contains 3 symbols, no other characters. I’ve declared the font globally using #define LV_FONT_CUSTOM_DECLARE LV_FONT_DECLARE(lv_font_pinesymbols_16). When I enter some failing code within the font’s .c file, the compiler errors, so I’m sure the font compiles. I can also use it in the application, no linking errors either. Everything looks to be setup correctly, still I’m not seeing anything rendered. I’ve compared with the roboto font but I can’t see any problem so far. Still, when I use the default font and one of the build in symbols, everything is rendered correctly.
Any help would be appriciated.

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

Pinetime dev kit, mbed-os, Nordic NRF52832 MCU, ST7789 display.

What do you experience?

Compiles and builds, but my custom symbol is not rendering. Other things, such as build-in components and symbols render perfectly fine.

What do you expect?

Custom symbols to be properly rendered

Code to reproduce

icBatt = lv_label_create(lv_scr_act(), NULL);
static lv_style_t lbl_style_pinetimefonts16;
lv_style_copy(&lbl_style_pinetimefonts16, &lv_style_plain);
lbl_style_pinetimefonts16.text.font = &lv_font_pinesymbols_16;  //Set a diferent font
lv_label_set_style(icBatt, LV_LABEL_STYLE_MAIN, &lbl_style_pinetimefonts16);
lv_obj_align(icBatt, NULL, LV_ALIGN_IN_TOP_RIGHT, 0, 0);  // Align to the top
lv_obj_set_hidden(icBatt, false);
lv_label_set_text_fmt(icBatt, LV_SYMBOL_BATTERY_3QUARTERS);
#define LV_SYMBOL_BATTERY_CHARGING      "\xef\x87\xa6" //0xf004
#define LV_SYMBOL_HEART                 "\xef\x80\x84" //0xf1e6
#define LV_SYMBOL_BATTERY_3QUARTERS     "\xEF\x89\x81" //0xf241

I’d like to upload the font source file but I’m not allowed to do that as new user.

#include "lvgl/lvgl.h"

/*******************************************************************************
 * Size: 16 px
 * Bpp: 4
 * Opts: 
 ******************************************************************************/

#ifndef LV_FONT_PINESYMBOLS_16
#define LV_FONT_PINESYMBOLS_16 1
#endif

#if LV_FONT_PINESYMBOLS_16

/*-----------------
 *    BITMAPS
 *----------------*/

/*Store the image of the glyphs*/
static LV_ATTRIBUTE_LARGE_CONST const uint8_t gylph_bitmap[] = {
    /* U+F004 "" */
    0x0, 0x0, 0x0, 0x0, 0x0, 0x0, 0x0, 0x0,
    0x0, 0x0, 0x19, 0xef, 0xc4, 0x0, 0x4c, 0xfe,
    0x91, 0x0, 0x1, 0xdf, 0xff, 0xff, 0x77, 0xff,
    0xff, 0xfd, 0x10, 0x9, 0xff, 0xff, 0xff, 0xff,
    0xff, 0xff, 0xff, 0x90, 0xe, 0xff, 0xff, 0xff,
    0xff, 0xff, 0xff, 0xff, 0xe0, 0xf, 0xff, 0xff,
    0xff, 0xff, 0xff, 0xff, 0xff, 0xf0, 0xd, 0xff,
    0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xd0, 0x7,
    0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0x70,
    0x0, 0xaf, 0xff, 0xff, 0xff, 0xff, 0xff, 0xfa,
    0x0, 0x0, 0xb, 0xff, 0xff, 0xff, 0xff, 0xff,
    0xb0, 0x0, 0x0, 0x0, 0xbf, 0xff, 0xff, 0xff,
    0xfb, 0x0, 0x0, 0x0, 0x0, 0xc, 0xff, 0xff,
    0xff, 0xc0, 0x0, 0x0, 0x0, 0x0, 0x0, 0xcf,
    0xff, 0xfc, 0x0, 0x0, 0x0, 0x0, 0x0, 0x0,
    0x1c, 0xff, 0xc0, 0x0, 0x0, 0x0, 0x0, 0x0,
    0x0, 0x1, 0xcc, 0x10, 0x0, 0x0, 0x0,

    /* U+F1E6 "" */
    0x0, 0xcc, 0x0, 0x0, 0xcc, 0x0, 0x0, 0xff,
    0x0, 0x0, 0xff, 0x0, 0x0, 0xff, 0x0, 0x0,
    0xff, 0x0, 0x0, 0xff, 0x0, 0x0, 0xff, 0x0,
    0x0, 0x88, 0x0, 0x0, 0x88, 0x0, 0xef, 0xff,
    0xff, 0xff, 0xff, 0xfe, 0xef, 0xff, 0xff, 0xff,
    0xff, 0xfe, 0xf, 0xff, 0xff, 0xff, 0xff, 0xf0,
    0xf, 0xff, 0xff, 0xff, 0xff, 0xf0, 0xc, 0xff,
    0xff, 0xff, 0xff, 0xc0, 0x5, 0xff, 0xff, 0xff,
    0xff, 0x40, 0x0, 0x8f, 0xff, 0xff, 0xf8, 0x0,
    0x0, 0x5, 0xcf, 0xfc, 0x50, 0x0, 0x0, 0x0,
    0xf, 0xf0, 0x0, 0x0, 0x0, 0x0, 0xf, 0xf0,
    0x0, 0x0, 0x0, 0x0, 0xf, 0xf0, 0x0, 0x0,

    /* U+F241 "" */
    0x8f, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
    0xff, 0x80, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
    0xff, 0xff, 0xff, 0xf0, 0xff, 0x0, 0x0, 0x0,
    0x0, 0x0, 0x0, 0x0, 0xf, 0xfd, 0xff, 0xf,
    0xff, 0xff, 0xff, 0xff, 0xf0, 0x0, 0xf, 0xff,
    0xff, 0xf, 0xff, 0xff, 0xff, 0xff, 0xf0, 0x0,
    0x0, 0xff, 0xff, 0xf, 0xff, 0xff, 0xff, 0xff,
    0xf0, 0x0, 0x0, 0xff, 0xff, 0xf, 0xff, 0xff,
    0xff, 0xff, 0xf0, 0x0, 0xf, 0xff, 0xff, 0x0,
    0x0, 0x0, 0x0, 0x0, 0x0, 0x0, 0xf, 0xfd,
    0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
    0xff, 0xf0, 0x8f, 0xff, 0xff, 0xff, 0xff, 0xff,
    0xff, 0xff, 0xff, 0x80
};


/*---------------------
 *  GLYPH DESCRIPTION
 *--------------------*/

static const lv_font_fmt_txt_glyph_dsc_t glyph_dsc[] = {
    {.bitmap_index = 0, .adv_w = 0, .box_w = 0, .box_h = 0, .ofs_x = 0, .ofs_y = 0} /* id = 0 reserved */,
    {.bitmap_index = 0, .adv_w = 256, .box_w = 18, .box_h = 15, .ofs_x = -1, .ofs_y = -1},
    {.bitmap_index = 135, .adv_w = 192, .box_w = 12, .box_h = 16, .ofs_x = 0, .ofs_y = -2},
    {.bitmap_index = 231, .adv_w = 320, .box_w = 20, .box_h = 10, .ofs_x = 0, .ofs_y = 1}
};

/*---------------------
 *  CHARACTER MAPPING
 *--------------------*/

static const uint16_t unicode_list_0[] = {
    0x0, 0x1e2, 0x23d
};

/*Collect the unicode lists and glyph_id offsets*/
static const lv_font_fmt_txt_cmap_t cmaps[] =
{
    {
        .range_start = 61444, .range_length = 574, .glyph_id_start = 1,
        .unicode_list = unicode_list_0, .glyph_id_ofs_list = NULL, .list_length = 3, .type = LV_FONT_FMT_TXT_CMAP_SPARSE_TINY
    }
};



/*--------------------
 *  ALL CUSTOM DATA
 *--------------------*/

/*Store all the custom data of the font*/
static lv_font_fmt_txt_dsc_t font_dsc = {
    .glyph_bitmap = gylph_bitmap,
    .glyph_dsc = glyph_dsc,
    .cmaps = cmaps,
    .kern_dsc = NULL,
    .kern_scale = 0,
    .cmap_num = 1,
    .bpp = 4,
    .kern_classes = 0,
    .bitmap_format = 0
};


/*-----------------
 *  PUBLIC FONT
 *----------------*/

/*Initialize a public general font descriptor*/
lv_font_t lv_font_pinesymbols_16 = {
    .get_glyph_dsc = lv_font_get_glyph_dsc_fmt_txt,    /*Function pointer to get glyph's data*/
    .get_glyph_bitmap = lv_font_get_bitmap_fmt_txt,    /*Function pointer to get glyph's bitmap*/
    .line_height = 16,          /*The maximum line height required by the font*/
    .base_line = 2,             /*Baseline measured from the bottom of the line*/
#if !(LVGL_VERSION_MAJOR == 6 && LVGL_VERSION_MINOR == 0)
    .subpx = LV_FONT_SUBPX_NONE,
#endif
    .dsc = &font_dsc           /*The custom font data. Will be accessed by `get_glyph_bitmap/dsc` */
};

#endif /*#if LV_FONT_PINESYMBOLS_16*/

Screenshot and/or video

Additionally I’d like to add that I’ve also added a custom font just now, with range 0-9, and that seems to render just fine. So I’m not sure why the symbols in the other font that I’ve added earlier are not working.

I’ve also used FontForge to check the FontAwesome5-Solid+Brands+Regular.woff font and see if the symbols are really there. They are.

Ok, I’ve finally tracked down the problem. The alignment isn’t behaving the same when changing font. The icon did get drawn using the custom font, however it was being drawn outside of the display area.
I had to set the alignment as following:
lv_obj_align(icBatt, NULL, LV_ALIGN_IN_TOP_RIGHT, -25, 0);