Font Family

Utilities for controlling the typeface of text.

• Basic Usage
• Quick Reference
• Variants
• Responsive Design
• Dark Mode
• Arbitrary Values
• Customizing Theme
• Related Documentation

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

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

[!NOTE] When using custom fonts (like Google Fonts), ensure the font assets are properly included in your pubspec.yaml or loaded via a package like google_fonts.

Related Documentation

• Font Size
• Font Weight
• Letter Spacing