Texts & Fonts

1. Generate your font atlas

uno UI renders text using distance-field font atlases. Before loading a font, convert your .ttf file using @uno.build/fonts:

npx @uno.build/fonts assets/ChangaOne.ttf

By default, this generates assets/ChangaOne.png and assets/ChangaOne.json.

For atlas generation and additional options, see Fonts and the CLI reference.

2. Load and register the font

const font_name = 'ChangaOne'

// Load font/image
const response_image = await fetch(`assets/${font_name}.png`)
const blob = await response_image.blob()
const image = await createImageBitmap(blob)

// Load font/data
const response_data = await fetch(`assets/${font_name}.json`)
const data = await response_data.json()

// Register the font
resources.registerFont(font_name, { image, data })

3. Use the font

const node = ui.create()
node.text('Hello World!')
node.style('fontFamily', font_name)
node.style('fontSize', '8vw')
node.style('color', '#ffffff')
node.style('textStroke', '0.5vw #000000')
node.style('textShadow', '0px 0.5vw 0px #000000')
ui.root.add(node)

• node.text('Hello World!') turns the node into a text node and sets its content. The node retains its standard properties, but cannot have children. Calling this method on a node that already has children, or adding a child to a text node, throws an error.
• node.style('fontFamily', font_name) sets the font for the text node. If fontFamily is not specified, the first registered font is used. If no fonts have been registered, an error is thrown.

Demo