JSFiddle - React, Tailwind, and code Playground

by Greg Bowler

HTML

<link rel="stylesheet" href="http://g105b.com/font-face/ubuntu.font.css">
<p class="lighter">Light weight</p>
<p class="normal">Normal weight (but it isn't!)</p>
<p class="bold">Bold weight</p>

<p>http://g105b.com/font-face/ubuntu.font.css is included in the external resources panel. Take a look at the stylesheet's contents. Nothing looks out of the ordinary, but due to the 'normal' weight not being triggered, I have added my own font face rule at the end of the file, set to a weight of '500'</p>

<p class="weight500">Weight 500</p>

CSS

body {
    font-family: "Ubuntu Web";
}

.lighter {
    font-weight: lighter;
}
.normal {
    font-weight: normal;
}
.bold {
    font-weight: bold;
}
.weight500 {
    font-weight: 500;
}