pdf-icon

UIFlow Guide

UiFlow1 Blockly

Event

Unit

UiFlow1 Project

UiFlow2 Development Guide

UI Editor

Device Security & Sharing

UiFlow2 Custom Font Integration Guide

UiFlow2 UI Editor supports external font integration to enable richer design expressions.

1. Preparation

Before using custom fonts, ensure:

  • You have obtained legal font files (.ttf format)

  • You understand the font's licensing terms

  • Test font example:Alibaba PuHuiTi

Note: Comply with font copyright regulations and ensure commercial use legality

2.Font Integration Steps

  • 1.Access UIFlow2 Web IDE

  • 2.Open UI simulator and enter design interface

  • 3.Drag any TitleorLabelcomponent to canvas

  • 4.In property panel's font configuration section, clickCreate Fontbutton and upload your TTF file

3.Font Optimization Settings (Required)

Two loading methods available: Symbol loading and Range loading. Can be combined. At least one method must be selected due to device storage limitations.

Range Loading

Import specific character sets via Unicode ranges. Examples: ASCII (0x20-0x7F), Common Chinese (0x4E00-0x9FA5)

Advantage: Suitable for continuously encoded character sets. Note: Check font encoding table in advance, avoid excessive ranges

Symbol Loading

Directly input required characters. Example: Enter "Hello M5Stack" to make only these characters available

Advantage: Precise control, saves space. Note: Must include all potentially needed characters

4.Best Practice Recommendations

  • Font optimization: Prioritize Symbol loading for essential characters only

  • Multilingual support: Include corresponding character sets if displaying multiple languages

  • Performance optimization: Recommended maximum of 3 custom fonts per project

  • Testing: Verify display effects after font integration

On This Page