title: Force Chrome to use external font in CSS
body: <p>It took me a long time to figure out, that Chrome always prefers local installed fonts over a font with the same name that is linked in the css (See also <a href="https://stackoverflow.com/a/27704394/1099519">https://stackoverflow.com/a/27704394/1099519</a>). My problem is how to figure out, to force Chrome not to do so.</p>
  
  <p>On my page <a href="https://www.amon.cc/" rel="nofollow noreferrer">https://www.amon.cc/</a> I use "Roboto Light" from Google Fonts (<a href="https://fonts.google.com/specimen/Roboto" rel="nofollow noreferrer">https://fonts.google.com/specimen/Roboto</a>), like this:</p>
  
  <pre><code>&lt;link href="//fonts.googleapis.com/css?family=Roboto:300" rel="stylesheet" type="text/css" /&gt;
  </code></pre>
  
  <p>In my CSS file the font is declared like this:</p>
  
  <pre><code>body{
    ...
    font-family:Roboto,...;
    font-weight:300;
   ....
  }
  </code></pre>
  
  <p>Which works perfectly fine in FF, IE, Edge:</p>
  
  <p><a href="https://i.stack.imgur.com/3UKzj.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/3UKzj.png" alt="Font in FF, IE, Edge"></a></p>
  
  <p>But the font is always thicker in Chrome:</p>
  
  <p><a href="https://i.stack.imgur.com/25Frt.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/25Frt.png" alt="Font in Chrome with local installed font"></a></p>
  
  <p>The reason: On my private Windows 10 and also on by business computer the font "Roboto" is pre-installed on Windows: Robot Regular, Robot Condensed. But there is no Roboto Thin or Robot Light, so it seems Chrome has a fallback to Roboto Regular.</p>
  
  <p>When deleting the Robot fontset from Windows, Chrome uses the declared web font and displays it the way I want it. I could not figure out, how to "force" Chrome not to use the local installation and instead use the on the CDN.</p>
  
  <p>However, Chrome <em>can</em> display the Roboto font in all different variants on the <a href="https://fonts.google.com/specimen/Roboto" rel="nofollow noreferrer">https://fonts.google.com/specimen/Roboto</a> website (even with my local installed Robot font). I couldn't find out the trick how this has been done.</p>