Skip to main content

Fonts

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

Overview​

The Fonts panel allows you 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​

When no fonts have been created yet, you can still create font styles using the default Montserrat Regular and Montserrat Bold fonts that come with Squareline Vision, which you can immediately use in your project.

Adding fonts​

Before creating font styles, you must upload TTF files to your project assets:

  1. Place your TTF font files in the Assets folder of your project or click the "+" button in the top-right corner of the Assets panel
  2. The TTF font files will appear in the panel

Creating a new font​

When you click the "+" button, the "Create font" dialog appears with the following options:

General settings​

  • Name: Assign a name to your 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 your font style.

thermostat

Managing existing fonts​

Once created, fonts appear in the Fonts panel:

Each font entry shows:

  • Font name
  • Font size
  • 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 your changes and click "Modify font"

Deleting fonts​

To delete a font style:

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

Best practices​

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

Technical notes​

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

By carefully configuring your fonts, you can balance aesthetics, performance, and memory usage in your UI projects.