Skip to main content
🏠CustomizationFont WeightVersion: 2.0.0-beta.6

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>