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>Works with
You can add font to any view. It changes what you see on 35 of the 39 components.
- VStack
- HStack
- ZStack
- LazyVStack
- LazyHStack
- Group
- Overlay
- ScrollView
- Button
- Toggle
- Checkbox
- Picker
- DatePicker
- ColorPicker
- Link
- ControlGroup
- Menu
- ContextMenu
- TextField
- SecureField
- Text
- Label
- List
- Form
- Section
- DisclosureGroup
- SwipeActions
- BottomSheet
- Alert
- ConfirmationDialog
- Popover
- ProgressView
- Gauge
- TabView
Needs care
It works on these components, but not in the way that you may expect.
| Component | What to know |
|---|---|
| Image | Sets the size and weight of an SF Symbol. It has no effect on a bitmap image. If you set no font, Image uses its size prop. |
No visible effect
These components accept it, but you see no change.
| Component | Why nothing happens |
|---|---|
| Spacer | It changes only text and SF Symbols, and Spacer shows neither. |
| Divider | It changes only text and SF Symbols, and Divider shows neither. |
| Slider | It changes only text and SF Symbols, and Slider shows neither. |
| AccessoryWidgetBackground | It changes only text and SF Symbols, and AccessoryWidgetBackground shows neither. |
Sources
The original Expo docs for this page:
- font (Modifiers) (
source-of-truth/versions/v57.0.0/sdk/ui/swift-ui/modifiers.md)