Проблема совместимости размера шрифта CSS-шрифта Firefox

Итак, я разработал макет одной страницы с использованием HTML/CSS. Страницу можно найти здесь:

http://letsrob.org/

Итак, текст заголовка страницы — это пользовательский шрифт, который я загрузил с помощью свойства font-face. Размер шрифта и начертание идеально подходят для Chrome, но размер шрифта больше в Firefox, и иногда сам шрифт выглядит немного иначе. Почему это так? Вся страница искажается только из-за шрифта заголовка!

Мой код шрифта:

@font-face {
    font-family: "logotext";
    src: url(http://letsrob.org/css/BEBAS.ttf) format("truetype");
}
@font-face {
    font-family: "captiontext";
    src: url(http://letsrob.org/css/Franchise-Bold-hinted.ttf) format("truetype");
}

Мои классы CSS для заголовков:

<div id="banner" style="margin-top:20px;color:white;font-weight:bold;font-size:1.75em;font-family:logotext;text-align:center;">Reclaim Our Beaches</div>

<div style="color:white;font-weight:bold;font-size:3em;font-family:captiontext;text-align:center;margin-top:20px;">ROB SYMPOSIUM: Talking trash, Exposing waste</div>

<div style="color:white;font-weight:bold;font-size:1.5em;font-family:captiontext;text-align:center;margin-top:20px;">10AM to 5PM, 18 & 19th AUGUST,2012</div>
<div style="color:white;font-weight:bold;font-size:1.5em;font-family:captiontext;text-align:center;margin-top:10px;">Conference Hall, School of Media Studies, Loyola College, Chennai</div>

Пожалуйста, посетите страницу, используя Firefox, чтобы увидеть нарушение. На хроме работает отлично!

заранее спасибо