Font weight

How to use

  • fw-thin
  • fw-extra-light
  • fw-light
  • fw-regular
  • fw-medium
  • fw-semi-bold
  • fw-bold
  • fw-extra-bold
  • fw-black

I recommend including the necessary weights for your project, the classes work only if you have included the corresponding font weights, otherwise and depending on the font you are going to use, the browser will try to force the behavior.

The following code includes some weights:


<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@100;300;400;500;600;700;800;900&display=swap" rel="stylesheet">

Examples

  • fw-thin

<p class="fw-thin">Thin (100)</p>

Thin (100)

  • fw-extra-light

<p class="fw-extra-light">Extra Light (200)</p>

Extra Light (200)

  • fw-light

<p class="fw-light">Light (300)</p>

Light (300)

  • fw-regular

<p class="fw-regular">Regular (400)</p>

Regular (400)

  • fw-medium

<p class="fw-medium">Medium (500)</p>

Medium (500)

  • fw-semi-bold

<p class="fw-semi-bold">Semi bold (600)</p>

Semi bold (600)

  • fw-bold

<p class="fw-bold">Bold (700)</p>

Bold (700)

  • fw-extra-bold

<p class="fw-extra-bold">Extra bold (800)</p>

Extra bold (800)

  • fw-black

<p class="fw-black">Black (900)</p>

Black (900)