Font Family
Use font-sans, font-serif, or font-mono to set the typeface of text content.
Basic example
Section titled “Basic example”Style('font-sans ...', child: Text('The quick brown fox ...'))Style('font-serif ...', child: Text('The quick brown fox ...'))Style('font-mono ...', child: Text('The quick brown fox ...'))Class reference
Section titled “Class reference”| Class | Font Family |
|---|---|
font-sans | Inter (bundled), with the cv02/cv03/cv04/cv11 character variants active and calt disabled — the same feature settings the Tailwind docs theme applies |
font-serif | RobotoSlab (bundled) |
font-mono | IBM Plex Mono (bundled), with ss02 and slashed zero active |
font-[<name>] | Arbitrary family literal (silent fallback if not registered); a bare all-digit value resolves as a font weight instead — see Font Weight. Force the family interpretation with the family-name: hint, e.g. font-[family-name:123]. |
font-(family-name:--var) | Resolved against theme-defined StyleThemeData.customProperties; the family-name: hint forces the family interpretation (needed for an all-digit family name) — e.g. font-(family-name:--var) behaves like font-[family-name:<value>]. Cascade-inherited or JS-set CSS variables remain out of scope. |