Skip to main content
Version: ver. 1.5.0

Fonts

The Fonts panel provides comprehensive tools for managing and customizing fonts in the embedded GUI. This guide explains how to use these features effectively.

Overview​

The Fonts panel allows users to:

  • Create custom font styles from TTF files
  • Configure font properties (size, bit-per-pixel, character ranges)
  • Manage existing font styles
  • Customize which characters are included to optimize memory usage

Initial state​

If no custom fonts have been created, font styles can still be generated using the default Montserrat Regular and Montserrat Bold fonts included with SquareLine Vision, which are immediately available for use in the project.

Adding fonts​

Before creating font styles, TTF files must be uploaded to the project assets:

  1. Place TTF (or OTF) font files in the Assets folder of the project or upload them with the three dots (...) menu in the top-right corner of the Assets panel
  2. The font files will appear in the panel

Creating a new font​

Clicking the "+" button, the "Create font" dialog appears with the following options:

General settings​

  • Name: Assign a name to the font style (default is "Font")

  • Family: Select from available font families uploaded to your assets (dropdown menu)

  • Size: Set the font size in pixels (e.g., 32)

  • Bpp (Bit-per-pixel): Select from options:

    • 1 bit-per-pixel (basic, no anti-aliasing)
    • 2 bit-per-pixel (basic anti-aliasing)
    • 4 bit-per-pixel (better anti-aliasing, default)

  • Letters: Choose which Latin alphabet character sets to include:

    • Standard (basic Latin characters)
    • Lowercase (only lowercase letters)
    • Uppercase (only uppercase letters)
    • Extended (extended Latin characters with accents)

  • Asian: Select Asian language support:

    • None (default)
    • Korean
    • Chinese
    • Japanese
    • CJK (Chinese, Japanese, Korean combined)

Custom settings​

  • Ranges: Define custom Unicode ranges in hexadecimal format
    • Example: 0x20-0x7F (Basic Latin)
    • Default: 0x20-0x7F (standard ASCII printable characters)
  • Symbols: Specify individual characters to include
    • Example: +-!%/=()?,;:-_ (common symbols)

Creating the font​

After configuring all settings, click the green "Create font" button at the bottom of the dialog to generate the font style.

thermostat

Managing existing fonts​

Once created, fonts appear in the Fonts panel:

Each font entry shows:

  • Font name
  • Font size - the same size label appears next to the font name in every font selector of the editor, such as the Font parameter of the Text style or the font cells of the Variable Manager
  • Adjustment icon
  • Minus (-) icon to remove
thermostat

Modifying fonts​

To modify an existing font:

  1. Click the adjustment icon
  2. The "Modify font" dialog appears with the same options as the creation dialog
  3. Make the desired changes and click "Modify font"

Deleting fonts​

To delete a font style:

  1. Hover over a created font
  2. Click the minus (-) button

Reordering fonts​

When the project contains more than one font, the list can be rearranged by drag and drop:

  1. Grab a font entry and drag it up or down
  2. A highlighted line shows whether the font will be placed above or below the entry under the cursor
  3. Release the mouse button to drop it

The order is saved with the project, and it is used in every font selector of the editor, for example in the Font parameter of the Text style or in the font cells of the Variable Manager.

Fonts as global variables​

A font can be stored in a global Font variable and bound to the Font parameter of text styles, chart axes or component properties. This way the typography of many widgets can be changed in one place, or switched per theme variation. See Global Variables for details.

Best practices​

  • Memory Optimization: Only include character ranges that the application will actually use
  • Performance Considerations: Higher Bpp values provide better quality but require more processing power
  • Font Size: Choose appropriate sizes based on the target device's display resolution
  • Character Sets: For multilingual applications, be sure to include all necessary character ranges

Technical notes​

  • SquareLine Vision uses LVGL's font converter to generate optimized font assets
  • Font styles are compiled into the project as C arrays
  • The software uses UTF-8 encoding for Unicode character support
  • Custom ranges are particularly useful for memory-constrained embedded systems

Careful font configuration helps balance aesthetics, performance, and memory usage in UI projects.