Font Weight

Utilities for controlling the font weight of an element.

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

WDiv(
  className: 'flex flex-col gap-4',
  children: [
    WText('The quick brown fox', className: 'font-light'),
    WText('The quick brown fox', className: 'font-normal'),
    WText('The quick brown fox', className: 'font-bold'),
  ],
)

Basic Usage

Control the font weight of an element using the font-{weight} utilities.

WText('Most text uses font-normal', className: 'font-normal')
WText('Important text uses font-bold', className: 'font-bold')

Quick Reference

Variants

Font Style

Control the font style of an element using the italic and not-italic utilities.

WText('This text is italicized.', className: 'italic')
WText('This text is normal.', className: 'not-italic')

Responsive Design

Apply different font weights at specific breakpoints using standard responsive prefixes.

// Normal on mobile, bold on medium screens and up
WText('Responsive Weight', className: 'font-normal md:font-bold')

Dark Mode

Adjust font weight based on the theme brightness. This is useful for maintaining legibility against dark backgrounds, where lighter weights might appear too thin.

// Lighter weight in dark mode for better readability
WText('Adaptive Weight', className: 'font-medium dark:font-normal')

Arbitrary Values

If you need a specific font weight that isn't included in your theme, use square bracket notation.

// Maps to the nearest standard FontWeight (e.g. 700 -> Bold)
WText('Custom Weight', className: 'font-[700]')
WText('Variable Weight', className: 'font-[550]')

Customizing Theme

You can customize the fontWeights scale in your WindThemeData configuration.

WindTheme(
  data: WindThemeData(
    fontWeights: {
      'hairline': FontWeight.w100,
      'heavy': FontWeight.w900,
      // Override default
      'bold': FontWeight.w600,
    },
  ),
  child: MyApp(),
)

Related Documentation

• Font Size
• Font Family
• Text Color