Font Weight

Utilities for controlling the font weight of an element.

• Class
  Properties
• font-black

  font-weight: var(--font-weight-black) !important

• font-bold

  font-weight: var(--font-weight-bold) !important

• font-light

  font-weight: var(--font-weight-light) !important

• font-medium

  font-weight: var(--font-weight-medium) !important

• font-regular

  font-weight: var(--font-weight-regular) !important

• font-thin

  font-weight: var(--font-weight-thin) !important

Usage

Control the font weight of an element using the font-{weight} utilities.

thinThe quick brown fox jumped over the lazy dog.

lightThe quick brown fox jumped over the lazy dog.

normalThe quick brown fox jumped over the lazy dog.

mediumThe quick brown fox jumped over the lazy dog.

boldThe quick brown fox jumped over the lazy dog.

blackThe quick brown fox jumped over the lazy dog.

<p class="font-thin ...">The quick brown fox ...</p>
<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-bold ...">The quick brown fox ...</p>
<p class="font-black ...">The quick brown fox ...</p>