title: Web Fonts on Mac appear different to Windows
body: <p>I've chosen to use one of the many Google Web Fonts as the main font for my website. The website is being displayed on both a Mac and Windows computer yet the font appears slightly different in terms of their dimensions and spacial conformations on the page.</p>
  
  <p><img src="https://i.stack.imgur.com/nhOMH.png" alt="Demonstration of different outcomes"></p>
  
  <p><a href="https://www.google.com/fonts#UsePlace:use/Collection:Lato" rel="noreferrer">Link to the Google Font</a></p>
  
  <p>The code in the CSS to apply the font is:</p>
  
  <pre><code>html, body {
      font-family: 'Lato', sans-serif;
  }
  </code></pre>
  
  <p>just like how the font website suggests embedding the font into the website. (Also the font is linked within the header file as required).</p>
  
  <p>The web browser I am using is Chrome in both instances, however the results stay the same if I use Safari on Mac or Firefox on Windows or any other assortment of browsers. It seems to be a system level thing going on here.</p>
  
  <p>What options do I have to go about fixing this so that I can still use a Google Web Font for my website?</p>