Skip to main content

Fonts

Hosanna fonts use a string value containing a system font name or asset URI and an optional size. Put reusable values under theme.fonts:

{
"theme": {
"fonts": {
"heading-40": "pkg:/assets/fonts/Poppins-SemiBold.ttf, 40",
"body-24": "pkg:/assets/fonts/Poppins-Regular.ttf, 24",
"system-body": "Medium,24"
}
}
}

Then reference the theme path from a view or style:

Label({
text: 'Continue watching',
fontKey: '~theme.fonts.heading-40',
})

Both ~theme.fonts.heading-40 and theme.fonts.heading-40 resolve through AppConfig. The tilde form makes a theme reference visually explicit.

Accepted values

FontManager.getFontWithKey() accepts these string forms:

ValueResult
"Medium,24"A named system font at size 24.
"pkg:/assets/fonts/Brand.ttf,24"A packaged font at size 24.
"cachefs:/hosanna-assets/theme/fonts/Brand.ttf,24"A font already present in cache storage.
"Medium"A named system font using its implicit size.

AppConfig font entries must resolve to a non-empty string. Object values such as { "uri": "...", "size": 24 } are not part of the current runtime contract.

fontKey can also contain a direct font string:

Label({
text: 'Diagnostics',
fontKey: 'pkg:/assets/fonts/Roboto-Bold.ttf,42',
})

Theme keys are preferable for product UI because they centralize typography.

Runtime behavior

FontManager resolves and caches a theme key or direct font string before web or native platform loading and label useFontManager resolves and caches a theme key or direct font string before web or native platform loading and label use

FontManager resolves theme keys, creates the platform font object, and caches it under the original and resolved strings. On web, the font service reports asynchronous load success or failure; labels can be remeasured when a font finishes loading. Other targets use their active SceneGraph-compatible font adapter.

getSimpleLabelFontInfoWithKey() exposes [fontUri, fontSize] for SimpleLabel. If a resolved system font has no positive explicit size, that path uses 36 as its fallback.

Troubleshooting

  • Confirm the value is a string with no misspelled theme.fonts path.
  • Confirm a packaged file is included at the referenced pkg:/ location.
  • Include a numeric size after the comma for predictable cross-platform measurement.
  • Keep URI and size together in the theme token; do not pass a font object.
  • When a web label measures before a custom font loads, inspect the font load status and the final asset URL.
Talk to us