Font

Font specifies the font to be used by a Label node, or any other nodes that render text

import { Font } from "@roku-sdk/components";

Font(props: IFontProps): JSX.Element

Description

Font specifies the font to be used by a Label node, or any other nodes that render text.

The uri field can be set to any TrueType/OpenType font file. A default system font can also be specified using the font: prefix (e.g., font:MediumBoldSystemFont).

Components that support Font:

Label / MultiStyleLabel: via font prop
ScrollableText: via font prop
ScrollingLabel: via font prop
LabelList: via font and focusedFont props
PosterGrid: via caption1Font and caption2Font props

Parameters

Name	Type	Description
`props`	IFontProps

Example

// Inline font prop with Label
<label text="Custom styled text" font={<font uri="pkg:/fonts/orbitron-font.ttf" size={32} />} />

// Reusable font definition (declared outside JSX return)
const myFont = <font uri="pkg:/fonts/cookie-regular.ttf" size={28} />;

// Then in return statement:
return (
    <group>
        <label text="ABCDEFGHIJKLMNOPQRSTUVWXYZ" font={myFont} />
        <label text="abcdefghijklmnopqrstuvwxyz" font={myFont} />
    </group>
);

// Using with ScrollableText
<scrollableText
    text="Long scrollable content..."
    width={800}
    height={400}
    font={<font uri="pkg:/fonts/readable.ttf" size={24} />}
/>

// Using with LabelList
<labelList
    itemSize={[440, 48]}
    font={<font uri="pkg:/fonts/menu.ttf" size={20} />}
    focusedFont={<font uri="pkg:/fonts/menu-bold.ttf" size={22} />}
    content={content}
/>

// Using with PosterGrid captions
<posterGrid
    basePosterSize={[200, 300]}
    caption1Font={<font uri="pkg:/fonts/title.ttf" size={18} />}
    caption2Font={<font uri="pkg:/fonts/subtitle.ttf" size={14} />}
    caption1NumLines={1}
    caption2NumLines={1}
    content={content}
/>

Types

IFontProps

Properties for the Font node.

Font specifies the font to be used by a Label node, or any other nodes that render text. The uri field can be set to any TrueType/OpenType font file included in the application package.

Example

// Using with a Label component
<Label text="Hello World" font={<Font uri="pkg:/fonts/custom.ttf" size={24} />} />

Name	Type	Description
`fallbackGlyph?`	`string`	String representation of a Unicode character to display when an unsupported glyph is encountered. For example, "u0020" would render a space for any unrenderable characters.
`preUpdate?`	`boolean`	If true, forces SceneGraph to update the component before it is rendered
`size?`	`number`	Specifies the size of the font in points.
`uri?`	`Uri`	Specifies a TrueType or OpenType font file. Currently only font files included in the application package can be specified.

Extends INodeProps.

Description

Parameters

Example

Types

IFontProps

Example

What’s Next