JSFiddle - React, Tailwind, and code Playground

by Wally Glenn

HTML

<h3 class="nunito">Nunito</h3>

<ul class="nunito">
   <li style="font-weight: 100 !important;">100 - Thin</li>
   <li style="font-weight: 200 !important;">200 - Extra Light (Ultra Light)</li>
   <li style="font-weight: 300 !important;">300 - Light</li>
   <li style="font-weight: 400 !important;">400 - Normal</li>
   <li style="font-weight: 500 !important;;">500 - Medium</li>
   <li style="font-weight: 600 !important;;">600 - Semi Bold (Demi Bold)</li>
   <li style="font-weight: 700 !important;;">700 - Bold</li>
   <li style="font-weight: 800; !important;">800 - Extra Bold (Ultra Bold)</li>
   <li style="font-weight: 900 !important;">900 - Black (Heavy)</li>
 </ul>
 
 <p class="nunito">Nunito has no 100, 300, 500, 700, or 900 font weight.</p>
 
 <h3 class="arial">Arial</h3>

<ul class="arial">
   <li style="font-weight: 100 !important;">100 - Thin</li>
   <li style="font-weight: 200 !important;">200 - Extra Light (Ultra Light)</li>
   <li style="font-weight: 300 !important;">300 - Light</li>
   <li style="font-weight: 400 !important;">400 - Normal</li>
   <li style="font-weight: 500 !important;;">500 - Medium</li>
   <li style="font-weight: 600 !important;;">600 - Semi Bold (Demi Bold)</li>
   <li style="font-weight: 700 !important;;">700 - Bold</li>
   <li style="font-weight: 800; !important;">800 - Extra Bold (Ultra Bold)</li>
   <li style="font-weight: 900 !important;">900 - Black (Heavy)</li>
 </ul>
 
 <p class="arial">Arial on the other hand, does not have a 100, 200, 300, 500, 700 or 900 font weight.</p>
 
<p class="arial">This is why some of the font weights on the jsfiddle page look the same.</p>

CSS

@import url('https://fonts.googleapis.com/css?family=Nunito');

.nunito {
  font-family: 'Nunito'
}

.arial {
  font-family: 'Arial'
}