font-style

<div class="row">
  <ul class="cell">
    <li><em>  normal:</em> <span class="fsNormal" >The quick brown fox jumps over the lazy dog</span></li>
    <li><em> oblique:</em> <span class="fsOblique">The quick brown fox jumps over the lazy dog</span></li>
    <li><em>  italic:</em> <span class="fsItalic" >The quick brown fox jumps over the lazy dog</span></li>
  </ul>

  <div class="cell note">
    The style above can vary, depending on the font you are using:
    <input id="fontName" value="Gill Sans">
  </div>
</div>

html,body {
  height: 100%;
  box-sizing: border-box;
}

.row {
  width: 100%;
  height: 100%;
  display: flex;
  background: #EEE;
  flex-direction: column;
}

.cell {
  flex: 1;
  white-space: nowrap;
  margin: .5em .5em 0;
  padding: .5em;
  background-color: #FFF;
  font: 1em monospace;
  overflow: auto;
}

.note {
  background: #fff3d4;
  padding: 1em;
  margin: 0 .5em .5em;
  font: .8em sans-serif;
  text-align: center;
  white-space: initial;
  flex: none;
}

ul {
  list-style: none;
}

ul.cell {
  padding: 1em 2em;
  font: 1rem/170% "Gill Sans", monospace;
}

li em {
  font-family: monospace;
  white-space: pre;
  font-style: normal;
}

.fsNormal  { font-style: normal;  }
.fsOblique { font-style: oblique; }
.fsItalic  { font-style: italic;  }

function updateFontFamily() {
  var fontName   = document.getElementById('fontName').value;
  var fontFamily = '"' + fontName + '", monospace';
  var UL = document.querySelector('ul.cell');

  UL.style.fontFamily = fontFamily;
}

window.addEventListener('load', function () {
  var INPUT = document.getElementById('fontName');
  INPUT.addEventListener('change', updateFontFamily);
  INPUT.addEventListener('input', updateFontFamily);
});

<p class="normal">This paragraph is normal.</p>
<p class="italic">This paragraph is italic.</p>
<p class="oblique">This paragraph is oblique.</p>