JSFiddle - React, Tailwind, and code Playground

HTML

<p class="os-400">Open Sans 400</p>
<p class="os-400 os-italic">Open Sans 400 Italic</p>
<p class="os-600">Open Sans 600</p>
<p class="os-600 os-italic">Open Sans 600 Italic</p>
<p class="os-700">Open Sans 700</p>
<p class="os-700 os-italic">Open Sans 700 Italic</p>

CSS

body
{
	font-family: 'Open Sans', sans-serif;
}
.os-400
{
  font-weight: 400;
}
.os-600
{
  font-weight: 600;
}
.os-700
{
  font-weight: 700;
}
.os-italic
{
  font-style: italic;
}

JavaScript

WebFontConfig = {
    google: { families: [ 'Open+Sans:400,400italic,600,600italic,700,700italic:latin' ] }
  };
  (function() {
    var wf = document.createElement('script');
    wf.src = 'https://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
    wf.type = 'text/javascript';
    wf.async = 'true';
    var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(wf, s);
})();