Font Family

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 family string. 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 family string, 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 family string, 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#

Each string goes whole to TextStyle.fontFamily; Wind does not split it into fontFamilyFallback, so Flutter does not try the listed families one by one. Register a single installed family under a custom key in WindThemeData.fontFamilies when the exact face matters.

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')

Related Documentation#

• Font Size
• Font Weight
• Letter Spacing