title: SVG is sharp and clear but font is blurry even with font smoothing set to none
body: <p>Help!</p>
  
  <p>Even though I set -webkit-font-smoothing: none; my font is still blurrier than the SVG it was created from.</p>
  
  <p>I tried setting <code>-webkit-font-smoothing: none !important;</code>but it made no difference. I verified I was targeting the right element by also changing <code>color:red</code>. However nothing seems to fix the blurriness.</p>
  
  <p><a href="https://i.stack.imgur.com/S3Zk3.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/S3Zk3.png" alt="The third right icon is an SVG, the fourth one is a font created with the SVG."></a></p>
  
  <p>The third right icon is an SVG, the fourth one is a font created with the SVG.</p>
  
  <p>I am sure this is related to some form of font smoothing, is it perhaps controlled by the browser or windows itself?</p>