Skip to main content
Version: v2.4.0 (Current)

🔡 Custom Fonts

Typography is a key element of a professional HMI. Artok allows you to import any TrueType (.ttf) or OpenType (.otf) font and convert it into a high-performance bitmap format optimized for your specific hardware.

⚙️ How Fonts Work in Artok​

Unlike a PC, an MCU does not scale vector fonts in real-time. Instead, the Asset Packer rasterizes the font into a bitmap at a specific pixel size.

Anti-Aliasing (Smoothing)​

Artok supports multi-level anti-aliasing to ensure text looks crisp even on small, low-resolution screens.

  • 1-bit: No smoothing (jagged edges), lowest memory.
  • 2-bit: Light smoothing, balanced memory.
  • 4-bit: High-quality smoothing (Standard), recommended for most UIs.

🛠 Importing and Subsetting​

Fonts are often the largest files in an embedded project. To save space, Artok uses Subsetting—only including the characters you actually need.

Range NameDescriptionCharacters
Basic LatinStandard English characters.A-Z, a-z, 0-9, Punctuation
SymbolsUI Icons (built-in).🔍, ⚙️, 🔋, 📶
Custom RangeUser-defined characters.e.g., "0123456789.:" for a clock
CJKChinese, Japanese, Korean.Requires large Flash (Sectors).

🎨 Visual Styling in Studio​

In the Inspector Panel, once a font is imported, you can apply these styles to any Label or Button:

  • Size: Defined in pixels (e.g., 24px).
  • Line Height: Adjust spacing between multiple lines of text.
  • Letter Spacing: Fine-tune the horizontal gap between characters (Kerning).
  • Decorations: Apply Underline or Strikethrough dynamically.

⚡ Runtime API (Lua)​

You can switch fonts at runtime based on the system state or language selection.

-- Change the font of a label
lbl_header:set_style_text_font("ROBOTO_BOLD_24")

-- Change color and alignment
lbl_header:set_style_text_color(0xFFFFFF)
lbl_header:set_style_text_align(LV_TEXT_ALIGN_CENTER)

-- Use a symbol font for an icon
btn_settings:set_text(SYMBOL_SETTINGS .. " Setup")
FLASH OVERHEAD

A full Latin-1 character set at 24px with 4-bit anti-aliasing can take up ~25 KB of Flash. If you include Chinese (CJK), this can jump to 2-5 MB. Always use Custom Ranges for CJK to only include the specific glyphs used in your UI.

🚀 The Icon Font Trick​

For the best performance, avoid using small PNG images for icons. Instead, use an Icon Font (like FontAwesome).

  1. Import the .ttf icon font.
  2. Select the specific icons you need in the Asset Packer.
  3. Display them in a Label using their Unicode hex code. This uses 10x less memory than images.

🚀 Next Steps​

  • Asset Packer — See how fonts are bundled into your project.
  • Label — The primary widget for displaying your custom fonts.
  • Bit Depth (BPP) — Understand how color depth affects font smoothing.