title: Bold font weight doesn't work when using Bootstrap stylesheet
body: <p>I am having issues will bold text when using bootstrap. Text that should be bold is not displayed as bold in Chrome:</p>
  
  <p><a href="https://i.stack.imgur.com/4Xrt0.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/4Xrt0.png" alt="enter image description here"></a></p>
  
  <p>However in Safari it works as expected:</p>
  
  <p><a href="https://i.stack.imgur.com/VdSGs.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/VdSGs.png" alt="enter image description here"></a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en" dir="ltr"&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;title&gt;Font check&lt;/title&gt;
  
  &lt;!--  Comment out the bootstrap stylesheet and it works  --&gt;
  &lt;link rel="stylesheet"
  href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
  integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
  crossorigin="anonymous"&gt;
  &lt;link rel="stylesheet" href="font-test.css"&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"&gt;
  
  &lt;!-- &lt;h1 class="font-weight-bold"&gt;Hello World!&lt;/h1&gt; --&gt;
  &lt;span class="bold-text"&gt;Hello World!&lt;/span&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>* {-webkit-font-smoothing: antialiased;}
  .bold-text {
    font-weight: 700;
    font-size: 2.5em;
  }
  </code></pre>
  
  <p>codepen: <a href="https://codepen.io/Kexarif/pen/rNOZMqO" rel="nofollow noreferrer">https://codepen.io/Kexarif/pen/rNOZMqO</a></p>
  
  <p>It was suggested that I needed to add <code>-webkit-font-smoothing: antialiased</code> but that makes no difference.</p>
  
  <p>If I comment out the Bootstrap stylesheet the text is displayed correctly in Chrome. So it seems to be because of the Bootstrap. Any ideas why this might be happening and what I can do to fix it?</p>