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:
| Value | Result |
|---|---|
"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 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.fontspath. - 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.