Fonts are note getting rendered like elsewhere

Bugs
1

What do you want to achieve?

Screenshot 2025-07-14 113229

I’ve been using google fonts and tried out some others fonts too for Roboto. It’s not about the font file itself — it’s about ligatures and OpenType features like glyph substitution and kerning pairs, which is not handled by SquareLine Studio.

In my expected image, the “fi” combination is replaced by a special ligature glyph:

The dot on “i” is removed, and

The “f” tail extends over it.

Adobe Fonts and modern browsers seems to automatically substitute these ligatures using OpenType features (liga, kern, etc.).

“f” + “i” will always appear as two separate characters, each rendered with its full design (dot included on “i”) in the squareline studio.

Please correct me if I am going wrong somewhere. Else kindly suggest a walkaround if any.

Thanks

2

This may be an LVGL font rendering issue. If I understand it correctly, SquareLine mostly sets up LVGL screens and objects to look a certain way, then LVGL draws it.

3

Screenshot 2025-07-14 113202
Yeah, this is the image of the font which the squareline generates. It seems like the squareline is not capable og generating fonts like adobe

4

Hi, you are absolutely correct in your analysis. The behavior you’re observing is expected.

SquareLine Studio uses LVGL’s font engine, which is highly optimized for embedded systems. This engine does not include a full OpenType layout processor. Therefore, it does not automatically handle advanced typographic features like ligature substitution (e.g., replacing ‘f’ + ‘i’ with the ‘fi’ glyph) or complex contextual alternates. The font converter simply renders the individual glyphs you specify.

Workaround:

The most effective workaround is to treat the ligature as a distinct character. Here’s how you can do it:

  1. Find the Unicode character for the ligature you need. For example:
  • fi is U+FB01
  • fl is U+FB02
  1. In SquareLine Studio, go to the Font Manager.
  2. Select your font and in the Symbols field, add the specific ligature character(s) you want to use (e.g., paste fifl into the field). This ensures the glyph for the ligature is included in your converted font.
  3. In your text labels within the editor, use the actual ligature character instead of the separate letters. You can copy it from a character map or another source and paste it directly into the text property of a widget.

For example, instead of typing File, you would find the fi character and use it to write file.

Regarding kerning, LVGL does support kerning pairs, and this data is typically included when the font is converted. However, this is separate from the ligature substitution feature.