Modifiers
font
Sets the font properties of a view.
font(params)
| Parameter | Type |
|---|---|
params | { design: 'default' | 'rounded' | 'serif' | 'monospaced', family: string, size: number, textStyle: 'body' | 'caption' | 'title' | 'largeTitle' | 'title2' | 'title3' | 'headline' | 'subheadline' | 'callout' | 'footnote' | 'caption2', weight: 'light' | 'black' | 'bold' | 'medium' | 'thin' | 'regular' | 'semibold' | 'heavy' | 'ultraLight' } |
Sets the font properties of a view.
Pass textStyle to scale with the user's Dynamic Type setting. Combine it with family to scale a custom font.
Returns: ModifierConfig
See: Official SwiftUI documentation for
system(_:design:weight:), andcustom(_:size:relativeTo:).
Example
// Scales with Dynamic Type
<Text modifiers={[font({ textStyle: 'largeTitle', weight: 'bold' })]}>Hello</Text>
// Custom font that scales relative to the body text style
<Text modifiers={[font({ textStyle: 'body', family: 'Helvetica', size: 18 })]}>Hi</Text>
// Fixed-size system font (no Dynamic Type scaling)
<Text modifiers={[font({ weight: 'bold', design: 'rounded', size: 16 })]}>Static</Text>Deprecated: Use
foregroundStyleinstead.
Works with
This modifier works with any view. These components accept it:
- VStack
- HStack
- ZStack
- LazyVStack
- LazyHStack
- Group
- Spacer
- Divider
- Overlay
- ScrollView
- Button
- Toggle
- Checkbox
- Slider
- Picker
- DatePicker
- ColorPicker
- Link
- ControlGroup
- Menu
- ContextMenu
- TextField
- SecureField
- Text
- Label
- Image
- List
- Form
- Section
- DisclosureGroup
- SwipeActions
- BottomSheet
- Alert
- ConfirmationDialog
- Popover
- ProgressView
- Gauge
- TabView
- AccessoryWidgetBackground
Sources
The original Expo docs for this page:
- font (Modifiers) (
source-of-truth/versions/v57.0.0/sdk/ui/swift-ui/modifiers.md)