#Font Weights
These are classes that set the font weight of an element.
| Class | Styles |
|---|---|
font-extrathin | |
font-thin | |
font-light | |
font-normal | |
font-medium | |
font-semibold | |
font-bold | |
font-extrabold | |
font-black | |
#Examples
Cirrus comes with a ton of ways to customize your text ranging from changing font weights to changing font styles.
Extrathin (100)
The quick brown fox jumps over the lazy dog.
<p class="font-extrathin">The quick brown fox jumps over the lazy dog.</p>Thin (200)
The quick brown fox jumps over the lazy dog.
<p class="font-thin">The quick brown fox jumps over the lazy dog.</p>Light (300)
The quick brown fox jumps over the lazy dog.
<p class="font-light">The quick brown fox jumps over the lazy dog.</p>Normal (400)
The quick brown fox jumps over the lazy dog.
<p class="font-normal">The quick brown fox jumps over the lazy dog.</p>Medium (500)
The quick brown fox jumps over the lazy dog.
<p class="font-medium">The quick brown fox jumps over the lazy dog.</p>Semibold (600)
The quick brown fox jumps over the lazy dog.
<p class="font-semibold">The quick brown fox jumps over the lazy dog.</p>Bold (700)
The quick brown fox jumps over the lazy dog.
<p class="font-bold">The quick brown fox jumps over the lazy dog.</p>Extrabold (800)
The quick brown fox jumps over the lazy dog.
<p class="font-extrabold">The quick brown fox jumps over the lazy dog.</p>Black (900)
The quick brown fox jumps over the lazy dog.
<p class="font-black">The quick brown fox jumps over the lazy dog.</p>