makepad-font_skill

Overview

This skill provides expert guidance for Makepad font and text rendering. It covers font configuration, text layout and shaping, GPU-based SDF rendering, and practical DSL usage for embedding fonts in Makepad apps. Use it to optimize typography, atlas sizing, and layout behavior in cross‑platform Makepad projects.

How this skill works

The skill inspects Makepad's text module surfaces: font families, font face data, atlas management, rasterizer and sdfer settings, the harfbuzz shaper, and the layouter API. It explains how glyphs are rasterized into GPU texture atlases as SDFs, cached, and sampled for crisp scalable text. It also shows the DSL patterns for defining fonts, text styles, and using the Layouter to request laid out text.

When to use it

• Configuring embedded or theme fonts for a Makepad app
• Tuning rasterizer/SDF parameters for sharp scalable text
• Designing text layout: wrapping, indentation, and multiple spans
• Diagnosing missing glyphs, shaping issues, or atlas overflow
• Choosing atlas sizes and cache sizes for performance vs memory

Best practices

• Embed fonts with dep("crate://...") and define font families in live_design for reuse
• Keep default cache_size (~4096) and adjust only when seeing cache thrashing or misses
• Use SDF padding/radius settings to balance sharpness and halo artifacts
• Use harfbuzz shaper for complex scripts and ensure font faces include required tables
• Prefer grayscale atlas 4096×4096 and color atlas 2048×2048 for emoji and color glyphs

Example use cases

• Define FONT_REGULAR and FONT_BOLD in live_design and apply via text_style across widgets
• Create a Layouter and call get_or_layout with OwnedLayoutParams for on‑demand layout caching
• Adjust sdfer::Settings (padding, radius, cutoff) to remove SDF halos at your target font sizes
• Detect unknown font_family_id via is_font_family_known and define missing families dynamically
• Switch to color atlas for emoji-heavy UI and increase cache_size when rendering many distinct glyphs