Skip to main content
.font(value?: TextStyle | number | CustomFont)
​
value
TextStyle | number | CustomFont
The font to apply. Can be:
  • A semantic text style name (e.g., "title", "body", "caption") — see TextStyle
  • A number for a custom point size using the system font
  • A CustomFont for a custom font family with a specific size

​
Support

​
Usage

​
Semantic text style

Text("Title").font("title")

Text("Small text").font("caption")

​
Custom point size

Text("Custom size").font(24)

​
Custom font family

Text("Custom font").font(
    CustomFont({ url: "https://example.com/Inter.ttf", family: "Inter", size: 16 })
)

​
Combined with weight and design

Text("Styled")
    .font("title2")
    .fontWeight("semibold")
    .fontDesign("rounded")

​
See Also