| Class | Properties |
|---|---|
.font-hairline | font-weight: 100; |
.font-thin | 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; |
Usage
Control the font weight of an element using the .font-{weight} utilities.
<p class="font-hairline ...">The quick brown fox jumped over the lazy dog.</p>
<p class="font-thin ...">The quick brown fox jumped over the lazy dog.</p>
<p class="font-light ...">The quick brown fox jumped over the lazy dog.</p>
<p class="font-normal ...">The quick brown fox jumped over the lazy dog.</p>
<p class="font-medium ...">The quick brown fox jumped over the lazy dog.</p>
<p class="font-semibold ...">The quick brown fox jumped over the lazy dog.</p>
<p class="font-bold ...">The quick brown fox jumped over the lazy dog.</p>
<p class="font-extrabold ...">The quick brown fox jumped over the lazy dog.</p>
<p class="font-black ...">The quick brown fox jumped over the lazy dog.</p>Variants
By default, only responsive variants are generated for font weight utilities.
Responsive
To control the font weight of an element at a specific breakpoint, add a {screen}: prefix to any existing font weight utility.
For example, use .md:font-bold to apply the font-bold utility at only medium screen sizes and above.
Hover-state
To include hover-state variants like .hover:font-bold, add "font-weight" to the $hover-variants variable when recompiling your CSS:
$hover-variants: (
// ...
"font-weight",
);