title: Arial in Chrome
body: <p>I have a problem with Arial (maybe other fonts too) in Chrome/Chromium.
  It looks good when I use font-family: Arial;
  But when I include Arial font-file via @font-face it looks different!
  Why could it be? What can I do to make them look the same? Where exactly Chrome takes its fonts?
  Here is my css</p>
  
  <pre class="lang-css prettyprint-override"><code>@font-face {
      font-family: 'My Arial';
      src: url(Arial.ttf) format('truetype');
      font-weight: normal;
      font-style: normal;
  }
  
  body {
      padding: 20px;
      font-size: 16px;
  }
  
  body#native {
      font-family: Arial;
  }
  
  body#fontface {
      font-family: 'My Arial';
  }
  </code></pre>
  
  <p>Here is the rendered text:  </p>
  
  <p><img src="https://i.imgur.com/bLPQ0.png" alt="Here is the pic">.</p>
  
  <p>Sorry for my English, it's not my native language.</p>