Utilities for controlling the font weight of an element.
2025-03-13
Written by: tdtc
| Class | Styles |
|---|---|
| font-thin | font-weight: 100; |
| font-extralight | font-weight: 200; |
| font-light | font-weight: 300; |
| 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-(<custom-property>) | font-weight: var(<custom-property>); |
font-[<value>] | font-weight: <value>; |
Use utilities like font-thin and font-bold to set the font weight of an element:
<p class="font-light ...">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>Use the font-[ syntax to set the font weight based on a completely custom value:
<p class="font-[1000] ...">
<!-- ... -->
</p>