Font Family
Utilities for controlling the typeface of text.
On this page
typography/font_family
The live demo is not available for this example.
font_family.dart
View source
WText('Sans-serif text', className: 'font-sans')
WText('Serif text', className: 'font-serif')
WText('Monospace text', className: 'font-mono')
Basic Usage#
Use font-{family} utilities to apply a font stack to an element.
Sans-serif#
Use font-sans to apply a web-safe sans-serif font stack. This is the default font family for Wind.
WText(
'The quick brown fox jumps over the lazy dog.',
className: 'font-sans text-lg',
)
Serif#
Use font-serif to apply a serif font stack, ideal for long-form text or editorial designs.
WText(
'The quick brown fox jumps over the lazy dog.',
className: 'font-serif text-lg',
)
Monospace#
Use font-mono to apply a monospace font stack, perfect for code snippets or technical data.
WText(
'const pi = 3.14159;',
className: 'font-mono text-sm bg-gray-100 p-2 rounded',
)
Quick Reference#
| Class | Font Family | Description |
|---|---|---|
font-sans |
ui-sans-serif, system-ui, ... |
Default sans-serif stack. |
font-serif |
ui-serif, Georgia, ... |
Default serif stack. |
font-mono |
ui-monospace, SFMono-Regular, ... |
Default monospace stack. |
Variants#
Hover and focus states can also change the font family, though this is less common.
WText(
'Hover me to switch fonts',
className: 'font-sans hover:font-serif transition-all',
)
Responsive Design#
Apply different font families at different breakpoints using standard responsive prefixes.
WText(
'Responsive Typography',
className: 'font-sans md:font-serif lg:font-mono',
)
Dark Mode#
You can enforce specific font families in dark mode using the dark: prefix.
WText(
'Code Snippet',
className: 'font-sans dark:font-mono',
)
Arbitrary Values#
If you need a specific font family that isn't in your theme, use bracket notation. This is useful for one-off fonts.
WText(
'Custom Branding',
className: 'font-[Roboto]',
)
Customizing Theme#
To add your own font families (like font-display or font-body), update WindThemeData in your app root.
WindTheme(
data: WindThemeData(
fontFamilies: {
'sans': 'Inter', // Overrides default font-sans
'display': 'Oswald', // Adds new font-display class
'body': 'Open Sans', // Adds new font-body class
},
),
child: MaterialApp(home: MyApp()),
)
Now you can use these classes in your widgets:
WText('Headlines', className: 'font-display text-4xl')
WText('Body text', className: 'font-body')