title: Same font is rendered different depending on how it is loaded
body: <p>We are developing an application using the <a href="https://fonts.google.com/specimen/Lato" rel="nofollow noreferrer">Lato font</a>. UI design is made in Figma.</p>
  <p>If we load the fonts locally (download the ttf's from google and convert them to woff and woff2) using font face</p>
  <pre><code>@font-face {
    font-family: 'Lato';
    src: url('~@/assets/fonts/lato-black-webfont.woff2') format('woff2'),
      url('~@/assets/fonts/lato-black-webfont.woff') format('woff');
    font-weight: $black;
    font-style: normal;
  }
  </code></pre>
  <p>it will render them different from figma (which is also loaded in web).</p>
  <p>If we load the fonts directly from google cdn using import</p>
  <pre><code>@import url(https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&amp;display=swap);
  
  </code></pre>
  <p>it will also render them different from figma and the local load.</p>
  <p>All 3 applications (custom app with fonts loaded locally, custom app with fonts loaded from cdn, figma) seem to render the font (specially the font-weight) differently (all 3 apps have the same style property values: font, font-family, font-size, font-weight, etc).</p>
  <p>Where does this difference result from?</p>