JSFiddle - React, Tailwind, and code Playground

HTML

<p>This sentence has both <i>italic text</i> and <span class="oblique">oblique text</span></p>
<p><b>This bold sentence has both <i>italic text</i> and <span class="oblique">oblique text</span></b></p>

CSS

@font-face {
      font-family: 'Noto Serif';
      font-style: normal;
      font-weight: 400;
      /* There are lots of pros and cons about just how you allow or disallow local fonts
         to be used. I'll go with allowing it here, to show it works throughout, but by
         all means change this to local('☺') to block local use, or so on. */
      src: local('Noto Serif'), local('NotoSerif'), url(http://fonts.gstatic.com/s/notoserif/v4/Lpe_acwQmwESv6cuCHE3rfesZW2xOQ-xsNqO47m55DA.woff) format('woff');
    }
    @font-face {
      font-family: 'Noto Serif';
      font-style: normal;
      font-weight: 700;
      src: local('Noto Serif Bold'), local('NotoSerif-Bold'), url(http://fonts.gstatic.com/s/notoserif/v4/lJAvZoKA5NttpPc9yc6lPYSoAJ3FdnHwSRdilZRLja4.woff) format('woff');
    }
    @font-face {
      font-family: 'Noto Serif';
      font-style: italic;
      font-weight: 400;
      src: local('Noto Serif Italic'), local('NotoSerif-Italic'), url(http://fonts.gstatic.com/s/notoserif/v4/HQXBIwLHsOJCNEQeX9kNzxsxEYwM7FgeyaSgU71cLG0.woff) format('woff');
    }
    @font-face {
      font-family: 'Noto Serif Fake Oblique';
      font-style: normal;
      font-weight: 400;
      src: local('Noto Serif'), local('NotoSerif'), url(http://fonts.gstatic.com/s/notoserif/v4/Lpe_acwQmwESv6cuCHE3rfesZW2xOQ-xsNqO47m55DA.woff) format('woff');
    }
    @font-face {
      font-family: 'Noto Serif Fake Oblique';
      font-style: normal;
      font-weight: 700;
      src: local('Noto Serif Bold'), local('NotoSerif-Bold'), url(http://fonts.gstatic.com/s/notoserif/v4/lJAvZoKA5NttpPc9yc6lPYSoAJ3FdnHwSRdilZRLja4.woff) format('woff');
    }
    *
    {
        font-family: 'Noto Serif';
    }
    .oblique
    {
        font-family: 'Noto Serif Fake Oblique'; /* Force faking, by only providing non-italic, non-oblique forms. */
        font-style: oblique;
    }