title: Google font "Source Sans Pro" does not look smooth on Chrome
body: <p>Why does the font on the left side within the list look so <em>chopy</em> on Chrome? The used and rendered font-face is <code>Source Sans Pro</code> with a <code>font-size: 16px</code> and <code>line-heigth: 24px</code>.</p>
  
  <p>I have double checked the zoom on chrome which is on 100%. When I zoom into the page, the font gets smoother. Also the text within the badges somehow looks strange. </p>
  
  <p>What can I do, to make this font look smoother?</p>
  
  <p><a href="https://i.imgur.com/RxhfVQo.png" rel="nofollow noreferrer"><img src="https://i.imgur.com/RxhfVQo.png" alt="enter image description here"></a></p>
  
  <hr>
  
  <p><strong>Update</strong></p>
  
  <p>After some trial and error I found the culprit, though I don't understand why it's causing the issues.</p>
  
  <p>I have integrated the font using an <code>@import</code> statement like the following within my scss: </p>
  
  <pre><code>@import url('https://fonts.googleapis.com/css?family=Source+Code+Pro|Source+Sans+Pro:300,300i,400,400i,700,700i&amp;display=swap');
  </code></pre>
  
  <p>When replacing the import url with this...</p>
  
  <pre><code>@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro&amp;display=swap');
  </code></pre>
  
  <p>... or when downloading the font and using it with a <code>@font-face</code> statement the fonts went smooth again... </p>
  
  <pre><code>@font-face {
    font-family: "Source Sans Pro";
    src: url('../fonts/SourceSansPro-Regular.ttf') format('truetype');
  }
  </code></pre>
  
  <p>Why is that? Also now the bootstrap classes <code>font-weight-normal</code> (400), <code>font-weight-light</code> (300) and <code>font-weight-ligther</code> (lighter?) all look the same. </p>
  
  <p>P.S. This seems to be related: <a href="https://stackoverflow.com/questions/16081545/google-webfonts-and-anti-aliasing">Google Webfonts and Anti-aliasing</a></p>