| Class | Properties |
|---|---|
| .fw-100 | font-weight: 100; |
| .fw-200 | font-weight: 200; |
| .fw-300 | font-weight: 300; |
| .fw-400 | font-weight: 400; |
| .fw-500 | font-weight: 500; |
| .fw-600 | font-weight: 600; |
| .fw-700 | font-weight: 700; |
| .fw-800 | font-weight: 800; |
| .fw-900 | font-weight: 900; |
A simple way to adjust the weight of font.
<p class="fw-100">Font weight 100</p>
<p class="fw-200">Font weight 200</p>
<p class="fw-300">Font weight 300</p>
<p class="fw-400">Font weight 400</p>
<p class="fw-500">Font weight 500</p>
<p class="fw-600">Font weight 600</p>
<p class="fw-700">Font weight 700</p>
<p class="fw-800">Font weight 800</p>
<p class="fw-900">Font weight 900</p>
Font weight 100
Font weight 200
Font weight 300
Font weight 400
Font weight 500
Font weight 600
Font weight 700
Font weight 800
Font weight 900
Input
<p class="fw-100">Font weight 100</p>
<p class="fw-200">Font weight 200</p>
<p class="fw-300">Font weight 300</p>
<p class="fw-400">Font weight 400</p>
<p class="fw-500">Font weight 500</p>
<p class="fw-600">Font weight 600</p>
<p class="fw-700">Font weight 700</p>
<p class="fw-800">Font weight 800</p>
<p class="fw-900">Font weight 900</p>
Output
<p class="fw-100" style="line-height: 24px; font-size: 16px; font-weight: 100 !important; width: 100%; margin: 0;" align="left">Some text here with some amount of weight</p>
<p class="fw-200" style="line-height: 24px; font-size: 16px; font-weight: 200 !important; width: 100%; margin: 0;" align="left">Some text here with some amount of weight</p>
<p class="fw-300" style="line-height: 24px; font-size: 16px; font-weight: 300 !important; width: 100%; margin: 0;" align="left">Some text here with some amount of weight</p>
<p class="fw-400" style="line-height: 24px; font-size: 16px; font-weight: 400 !important; width: 100%; margin: 0;" align="left">Some text here with some amount of weight</p>
<p class="fw-500" style="line-height: 24px; font-size: 16px; font-weight: 500 !important; width: 100%; margin: 0;" align="left">Some text here with some amount of weight</p>
<p class="fw-600" style="line-height: 24px; font-size: 16px; font-weight: 600 !important; width: 100%; margin: 0;" align="left">Some text here with some amount of weight</p>
<p class="fw-700" style="line-height: 24px; font-size: 16px; font-weight: 700 !important; width: 100%; margin: 0;" align="left">Some text here with some amount of weight</p>
<p class="fw-800" style="line-height: 24px; font-size: 16px; font-weight: 800 !important; width: 100%; margin: 0;" align="left">Some text here with some amount of weight</p>
<p class="fw-900" style="line-height: 24px; font-size: 16px; font-weight: 900 !important; width: 100%; margin: 0;" align="left">Some text here with some amount of weight</p>