React Font weight Utilities

Font weight

Quickly change the font-weight of text. font-weight utilities are abbreviated as .fw-*.

<p className="fw-bolder">Bolder weight text (relative to the parent element).</p>
<p className="fw-semibold">Semibold weight text.</p>
<p className="fw-medium">Medium weight text.</p>
<p className="fw-normal">Normal weight text.</p>
<p className="fw-light">Light weight text.</p>
<p className="fw-lighter">Lighter weight text (relative to the parent element).</p>

<p className="fw-bolder">Bolder weight text (relative to the parent element).</p>
<p className="fw-semibold">Semibold weight text.</p>
<p className="fw-medium">Medium weight text.</p>
<p className="fw-normal">Normal weight text.</p>
<p className="fw-light">Light weight text.</p>
<p className="fw-lighter">Lighter weight text (relative to the parent element).</p>

Adding a weight

The weights come from one $font-weights map, which generates the .fw-* classes and a --cui-font-weight-{name} custom property each. Adding a step therefore adds its utility:

@use "@coreui/coreui-pro" with (
  $font-weights: map.merge($font-weights, ("black": 900))
);

map.merge matters here — assigning the map plainly replaces it, and the other six weights go with it.

Components read the tokens rather than a build-time copy, so raising a weight at runtime reaches them:

:root {
  --cui-font-weight-semibold: 650;
}

Customizing

Sass maps

Each entry is one weight: the key names the .fw-* class and the matching --cui-font-weight-* token, and null drops both.

$font-weights: () !default;
// stylelint-disable-next-line scss/dollar-variable-default
$font-weights: defaults(
  (
    lighter: lighter,
    light: 300,
    normal: 400,
    medium: 500,
    semibold: 600,
    bold: 700,
    bolder: bolder
  ),
  $font-weights
);

Utilities API

Font weight utilities are declared in our utilities API in scss/_utilities.scss. Learn how to use the utilities API.

"font-weight": (
  property: font-weight,
  class: fw,
  values: $font-weights
),