JSFiddle - React, Tailwind, and code Playground

HTML

<div style="font-style: italic">(imported font weights: 300, 400, 600, 700, 800)</div>
<hr>
<div style="font-weight: 100">This is some text with weight 100.</div>
<div style="font-weight: 200">This is some text with weight 200.</div>
<div style="font-weight: 300">This is some text with weight 300.</div>
<div style="font-weight: 400">This is some text with weight 400.</div>
<div style="font-weight: 500">This is some text with weight 500.</div>
<div style="font-weight: 600">This is some text with weight 600.</div>
<div style="font-weight: 700">This is some text with weight 700.</div>
<div style="font-weight: 800">This is some text with weight 800.</div>
<hr>
<div style="font-weight: 400">This is some text with weight 400.
    <div style="font-weight: lighter">This text is one step lighter than above.
        <div style="font-weight: lighter">This text is one step lighter than above.
            <div style="font-weight: lighter">This text is one step lighter than above.</div>
        </div>
    </div>
</div>
<hr>
<div style="font-weight: 400">This is some text with weight 400.
    <div style="font-weight: bolder">This text is one step bolder than above.
        <div style="font-weight: bolder">This text is one step bolder than above.
            <div style="font-weight: bolder">This text is one step bolder than above.
                <div style="font-weight: bolder">This text is one step bolder than above.</div>
            </div>
        </div>
    </div>
</div>

CSS

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  src: local('Open Sans Light'), local('OpenSans-Light'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/DXI1ORHCpsQm3Vp6mXoaTXhCUOGz7vYGh680lGh-uXM.woff) format('woff');
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans'), local('OpenSans'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  src: local('Open Sans Semibold'), local('OpenSans-Semibold'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/MTP_ySUJH_bn48VBG8sNSnhCUOGz7vYGh680lGh-uXM.woff) format('woff');
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  src: local('Open Sans Bold'), local('OpenSans-Bold'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/k3k702ZOKiLJc3WVjuplzHhCUOGz7vYGh680lGh-uXM.woff) format('woff');
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 800;
  src: local('Open Sans Extrabold'), local('OpenSans-Extrabold'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/EInbV5DfGHOiMmvb1Xr-hnhCUOGz7vYGh680lGh-uXM.woff) format('woff');
}

body {
    font: normal 15px"Open Sans";
}