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