Вертикальное смещение пользовательского шрифта CSS (ошибка?)

Я использую пользовательский шрифт в моем CSS с помощью этого метода:

@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;
}

<div class="gabriola">Some texty text here</div>

Каждый браузер отображает эти шрифты по-своему с вертикальным смещением сверху и снизу вот так

Что я делаю не так? Спасибо