UIFlow Guide
UiFlow1 Quick Start
2. Firmware & Program 1.0
UiFlow1 Development Guide
Project Management
UiFlow1 Blockly
Event
UI
Unit
Module
Hat
UiFlow2 Quick Start
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, click
Create 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