Skip to main content
CustomFont(props?: CustomFontProps): FontComponent;

type CustomFontProps = {
    url: string;
    family: string;
    size: number;
    relativeToTextStyle?: string;
}

​
Parameters

​
props.url
string
The URL to the custom font file.
​
props.family
string
The font family name.
​
props.size
number
The font size in points.
​
props.relativeToTextStyle
string
Optional text style to scale the font size relative to (e.g., “body”, “headline”).

​
Support

​
Usage

​
Basic custom font

Text("Custom font text")
    .font(CustomFont({
        url: "https://example.com/fonts/MyFont.ttf",
        family: "MyFont",
        size: 18
    }))

​
Custom font relative to text style

Text("Scaled custom font")
    .font(CustomFont({
        url: "https://example.com/fonts/MyFont.ttf",
        family: "MyFont",
        size: 16,
        relativeToTextStyle: "body"
    }))

​
Notes

  • The font file must be accessible from the provided URL
  • Supported font formats .ttf & .otf.
  • When using relativeToTextStyle, the font size will scale based on the user’s dynamic type settings