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

type CustomFontProps = {
    url: string;
    family: string;
    size: number;
    relativeToTextStyle?: string;
};
​
url
string
required
URL to the font file. Supports .ttf and .otf formats.
​
family
string
required
The font family name, as defined in the font file metadata.
​
size
number
required
Font size in points.
​
relativeToTextStyle
string
A semantic text style (e.g. "body", "headline") to scale the font size relative to for Dynamic Type support. When set, the font scales with the user’s accessibility text size preference.

​
Support

​
Usage

​
Basic custom font

Text("Custom styled text")
    .font(CustomFont({
        url: "https://example.com/fonts/Inter-Regular.otf",
        family: "Inter",
        size: 18
    }))

​
With Dynamic Type scaling

Text("Accessible custom font")
    .font(CustomFont({
        url: "https://example.com/fonts/Inter-Regular.otf",
        family: "Inter",
        size: 16,
        relativeToTextStyle: "body"
    }))

​
Multiple weights

VStack({ spacing: 8 }, [
    Text("Heading")
        .font(CustomFont({
            url: "https://example.com/fonts/Inter-Bold.otf",
            family: "Inter",
            size: 24
        })),
    Text("Body text content here")
        .font(CustomFont({
            url: "https://example.com/fonts/Inter-Regular.otf",
            family: "Inter",
            size: 16,
            relativeToTextStyle: "body"
        }))
])

​
Notes

  • The font file must be accessible from the provided URL at runtime.
  • Supported formats are .ttf and .otf.
  • CustomFont returns a FontComponent that is passed to the .font() modifier, not used as a standalone view.
  • When relativeToTextStyle is set, the font size scales with the user’s Dynamic Type preference, providing accessibility support.

​
See Also

  • Text — text display