title: CSS custom font vertical offset (bug?)
body: <p>I use custom font in my CSS with this method:</p>
  
  <pre><code>@font-face {
      font-family: 'Gabriola';
      src: url('Gabriola.eot');
      src: url('Gabriola.eot?#iefix') format('embedded-opentype'),
           url('Gabriola.woff') format('woff'),
           url('Gabriola.ttf') format('truetype');
      font-weight: normal;
      font-style: normal;
  }
  .gabriola {
    font-size: 20px;
    line-height: 20px;
    height: 20px;
    background: red;
  }
  
  &lt;div class="gabriola"&gt;Some texty text here&lt;/div&gt;
  </code></pre>
  
  <p>Each browser renders this fonts by it's own way with vertical offset top and bottom like this
  <img src="https://i.stack.imgur.com/DkjGa.png" alt="font rendering"></p>
  
  <p>What am I doing wrong? Thanks</p>