Font Weight
Utilities for specifying the weight of a font.
| Class Name | CSS Equivalent |
|---|---|
| .weight-black | font-weight: 900 |
| .weight-extrabold | font-weight: 800 |
| .weight-bold | font-weight: 700 |
| .weight-semibold | font-weight: 600 |
| .weight-medium | font-weight: 500 |
| .weight-regular | font-weight: 400 |
| .weight-light | font-weight: 300 |
| .weight-extralight | font-weight: 200 |
| .weight-thin | font-weight: 100 |
Setting the font weight
Control the font weight of an element using the font-{weight} utilities.
html
<p class="[...] weight-light">The quick brown fox ...</p>
<p class="[...] weight-normal">The quick brown fox ...</p>
<p class="[...] weight-medium">The quick brown fox ...</p>
<p class="[...] weight-semibold">The quick brown fox ...</p>
<p class="[...] weight-bold">The quick brown fox ...</p>