Code highlighting issue with Chrome not displaying text that creates ligatures with a Q in a custom font

sample.css

body {
  color: #524238;
  font: normal normal normal 13px/1.231 Neuton, Georgia, serif;
  text-shadow: rgba(0, 0, 0, 0.0078125) 0px 0px 1px;
}
#main article > footer ul li {
  font-family: 'IM Fell English', Georgia, serif;
  font-weight: normal;
}

sample.html

<article class="category visible primary" id="category-Vehicle-Emergencies" data-quiz-title="Could you quickly solve a vehicle issue?" rev="10" style="left: 426px; z-index: 3; ">
  <figure>
    <img src="http://wikihow.easy-clients.net/images/card-images/vehicle-emergencies.png" alt="Vehicle&lt;br /&gt;Emergencies">
  </figure>
  <header>
    <h1>Vehicle<br>Emergencies</h1>
    <h2>Could you quickly solve a vehicle issue?</h2>
  </header>
  <footer>
    <ul>
      <li><a class="learn-how" title="Learn How" href="#/categories/Vehicle-Emergencies">Learn How</a></li>
      <li><a class="quiz" title="Quiz Yourself" href="#/categories/Vehicle-Emergencies/quiz">Quiz Yourself</a></li>
    </ul>
  </footer>
</article>