Font Weight
Utilities for controlling the font weight of an element.
| Class | Properties |
|---|---|
| font-thin | font-weight: 100; |
| font-extralight | font-weight: 200; |
| font-light | font-weight: 300; |
| font-regular | font-weight: 400; |
| font-normal | font-weight: 400; |
| font-medium | font-weight: 500; |
| font-semibold | font-weight: 600; |
| font-bold | font-weight: 700; |
| font-extrabold | font-weight: 800; |
| font-black | font-weight: 900; |
| font-extrablack | font-weight: 950; |
Setting the font weight
Use the font-* utilities to control the font weight of an element.
html
<p class="font-thin ...">The quick brown fox ...</p>
<p class="font-extralight ...">The quick brown fox ...</p>
<p class="font-light ...">The quick brown fox ...</p>
<p class="font-regular ...">The quick brown fox ...</p>
<p class="font-normal ...">The quick brown fox ...</p>
<p class="font-medium ...">The quick brown fox ...</p>
<p class="font-semibold ...">The quick brown fox ...</p>
<p class="font-bold ...">The quick brown fox ...</p>
<p class="font-extrabold ...">The quick brown fox ...</p>
<p class="font-black ...">The quick brown fox ...</p>
<p class="font-extrablack ...">The quick brown fox ...</p>