title: SF Pro Display looks different to native Apple System Font - kerning (letter-spacing) doesn't match
body: <p>I installed the SF Fonts from <a href="https://developer.apple.com/fonts/" rel="nofollow noreferrer">https://developer.apple.com/fonts/</a> but when I install and use them, they look different from the native &quot;apple-system&quot; fonts when setting the body <code>font-family</code> in the CSS. When I change this to use &quot;SF Pro Display&quot;, the letters look much closer together.</p>
  <pre><code>/* Using downloaded font: */
  body {
    font-family: 'SF Pro Display';
  }
  
  /* Using native font: */
  body {
    font-family: -apple-system, 'system-ui';
  }
  </code></pre>
  <p><a href="https://i.stack.imgur.com/xoKYP.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/xoKYP.png" alt="enter image description here" /></a></p>
  <p>On closer inspection, Chrome renders the font: <code>.SF NS Display—Local file(10 glyphs)</code></p>
  <p>Is this a different font completely? Seems strange that this isn't included in the Developer font download. However the main difference seems to be the letter-spacing.</p>