Font Weight
Control the thickness of text using predefined weight names. Font weights can also be customized in the theme.
On this page
typography/font_weight
The live demo is not available for this example.
font_weight.dart
View source
WText('Bold Text', className: 'font-bold');
WText('Thin Text', className: 'font-thin');
WText('Black Text', className: 'font-black');
Basic Usage#
Apply font weights using the font- prefix followed by a weight name:
WText('Normal body text', className: 'font-normal');
WText('Section heading', className: 'font-semibold text-gray-900 dark:text-gray-100');
WText('Strong callout', className: 'font-bold');
Quick Reference#
| Class | Weight | Flutter FontWeight |
|---|---|---|
font-thin |
100 | FontWeight.w100 |
font-extralight |
200 | FontWeight.w200 |
font-light |
300 | FontWeight.w300 |
font-normal |
400 | FontWeight.w400 |
font-medium |
500 | FontWeight.w500 |
font-semibold |
600 | FontWeight.w600 |
font-bold |
700 | FontWeight.w700 |
font-extrabold |
800 | FontWeight.w800 |
font-black |
900 | FontWeight.w900 |
Responsive Design#
Combine weight classes with breakpoint prefixes:
WText('Heading', className: 'font-normal md:font-semibold lg:font-bold');
Customizing Theme#
Override or extend the font weight map with WindTheme.setFontWeight(key, fontWeight):
WindTheme.setFontWeight('normal', FontWeight.w500);
// All font-normal usages now render at w500
See Customizing Font Weight for full details.
Related Documentation#
- Font Size — set text size.
- Font Style — italic and normal styles.
- Customizing Font Weight — override the default weight map.