Fonts
Utility classes for font weight, font style, and font family. These override any inherited or component-level font settings.
Font weight
Set the weight of any text element. Use .fw-normal (400), .fw-medium (500), .fw-semibold (600), or .fw-bold (700).
<p class="fw-normal mb-3">Normal weight (400)</p>
<p class="fw-medium mb-3">Medium weight (500)</p>
<p class="fw-semibold mb-3">Semibold weight (600)</p>
<p class="fw-bold">Bold weight (700)</p>Normal weight (400)
Medium weight (500)
Semibold weight (600)
Bold weight (700)
Font style
Toggle italic rendering. Use .fs-normal to reset an inherited italic, or .fs-italic to apply it.
<p class="fs-normal mb-3">Normal style text</p>
<p class="fs-italic">Italic style text</p>Normal style text
Italic style text
Font family
Switch the font stack on any element. The three families map to the library's font-role tokens: .font-prose for serif headings and editorial text, .font-ui for sans-serif body and interface text, and .font-mono for code and tabular data.
<p class="font-prose mb-3">Prose font — Charter, Bitstream Charter, serif</p>
<p class="font-ui mb-3">UI font — Inter, Roboto, sans-serif</p>
<p class="font-mono">Mono font — ui-monospace, Cascadia Code, monospace</p>Prose font — Charter, Bitstream Charter, serif
UI font — Inter, Roboto, sans-serif
Mono font — ui-monospace, Cascadia Code, monospace
Responsive
All font utilities support responsive breakpoint suffixes: @sm, @md, @lg, @xl, @2xl.
<p class="fw-normal fw-bold@md mb-3">Normal weight on mobile, bold from md up</p>
<p class="fs-normal fs-italic@lg mb-3">Normal style on mobile, italic from lg up</p>
<p class="font-ui font-mono@md">UI font on mobile, mono from md up</p>Normal weight on mobile, bold from md up
Normal style on mobile, italic from lg up
UI font on mobile, mono from md up
Reference
| Class | Property | Responsive |
|---|---|---|
.fw-normal | font-weight: 400 | Yes |
.fw-medium | font-weight: 500 | Yes |
.fw-semibold | font-weight: 600 | Yes |
.fw-bold | font-weight: 700 | Yes |
.fs-normal | font-style: normal | Yes |
.fs-italic | font-style: italic | Yes |
.font-prose | font-family: var(--f-prose) | Yes |
.font-ui | font-family: var(--f-ui) | Yes |
.font-mono | font-family: var(--f-mono) | Yes |