This is a beta release of the Quantum web libraries

Please be careful when using them in production, as they may contain bugs, unstable breaking changes, and incomplete features.

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>

Spotted a bug, have a question, or want to suggest a new feature?

Submit an issue on GitLab

Usage​

Usage