skills.rest
RoooyHe
RoooyHeCOMMUNITY
Explore all skills by this author →
Website𝕏@RoooyHeGitHub

makepad-font

Automate Makepad font configuration, Harfbuzz text shaping, and SDF rendering workflows.

Updated Feb 3, 2026
Search Tags:#layout#font#SDF#makepad#text rendering#harfbuzz
One-click install
npx skills add https://github.com/RoooyHe/betula --skill makepad-font
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: makepad-font
Source: https://github.com/RoooyHe/betula/tree/main/.claude/skills/makepad-font
Command: npx skills add https://github.com/RoooyHe/betula --skill makepad-font

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides expert guidance and tooling for configuring Makepad fonts, laying out text with Harfbuzz, and rendering glyphs efficiently using SDF, enabling high-quality typography in Makepad-based UIs.

Core Features & Use Cases

  • Font configuration: define font families and faces, load embedded or external fonts, and switch typography dynamically.
  • Text layout & shaping: leverage the layouter and harfbuzz-based shaping for correct glyph positioning and multi-line wrapping.
  • Rendering & performance: GPU-based SDF text rendering with cached font atlases to ensure crisp, scalable text across sizes.

Quick Start

Use the Makepad Font Skill to load a font resource and render sample text such as "Hello Makepad" at 14pt to verify layout and rendering.

Frequently Asked Questions about makepad-font

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I configure custom fonts in Makepad for UI text rendering?▼

To configure custom fonts in Makepad, define font families and faces, load embedded or external font resources, and switch typography dynamically for high-quality UI text rendering.

What is SDF text rendering in Makepad and how does it work?▼

SDF text rendering in Makepad is a GPU-based technique using cached font atlases to ensure crisp, scalable text across various sizes. It efficiently renders glyphs for high-quality UI typography.

How do I use Harfbuzz for text shaping and glyph layout in Makepad?▼

Use the Makepad layouter and Harfbuzz-based shaping for correct glyph positioning and multi-line wrapping. This ensures accurate typography layout for complex text rendering workflows.

Can I dynamically switch font families in a Makepad UI?▼

Yes, you can dynamically switch typography in Makepad. The font configuration process allows you to define font families and faces, load external fonts, and switch between them dynamically.

Does Makepad support loading embedded font resources for offline rendering?▼

Yes, Makepad supports loading embedded font resources. You can load embedded or external fonts to satisfy font loading requirements and enable offline text rendering workflows.

Related Skills

Explore More Software Engineering Skills→
SageV1SageV1
1

makepad-font

Load, shape, and render fonts with harfbuzz and GPU-based SDF in Makepad.

Community
Advanced
ZhangHanDongZhangHanDong
745

makepad-font

Render SDF-based glyphs with Harfbuzz shaping in Makepad UIs.

Community
Advanced
sitapixsitapix

apple-text-line-breaking

Apply NSParagraphStyle properties for line wrapping, hyphenation, truncation, and spacing in iOS and macOS text rendering.

Community
Intermediate
danielraffeldanielraffel
13

sdf-text

Build and sample SDF, MSDF, and PSDF glyph atlases for canvas text rendering.

Community
Intermediate