Font Weight

Use font-{weight} utilities to control the weight (boldness) of text.

---

Basic example

Use utilities like font-thin and font-bold to set the font weight of an element:

Style('font-light ...', child: Text('The quick brown fox ...'))
Style('font-normal ...', child: Text('The quick brown fox ...'))
Style('font-medium ...', child: Text('The quick brown fox ...'))
Style('font-semibold ...', child: Text('The quick brown fox ...'))
Style('font-bold ...', child: Text('The quick brown fox ...'))

Class reference

Class	Weight
font-thin	100
font-extralight	200
font-light	300
font-normal	400
font-medium	500
font-semibold	600
font-bold	700
font-extrabold	800
font-black	900
font-[<value>]	A bare integer (font-[1000]) resolves to the nearest weight step, rounded to the nearest hundred (ties round up, e.g. font-[650] → 700) and clamped to 100–900, plus a wght FontVariation carrying the exact value for variable fonts. A non-numeric value, or one with a family-name: hint (font-[family-name:123]), resolves as a font family instead — see Font Family.
font-(--var)	Resolved against theme-defined StyleThemeData.customProperties; e.g. font-(--my-weight) behaves like font-[<value>] when the theme defines --my-weight: '650'. A weight: hint (font-(weight:--var)) forces the weight interpretation regardless of the substituted value’s shape. Cascade-inherited or JS-set CSS variables remain out of scope.