Проблема с подключаемым шрифтом

Возникла какая-то странная проблема. Верстаю страничку в редакторе и проверяю его на соответствие с макетом в FireFox. Однако когда открываю html файл в Chrome подключенные шрифта сбрасываются на дефолтные. Пробовал по разному прописывать в css, но в результате либо в FireFox начинает отображаться Arial а в Chrome нужный шрифт, либо наоборот.

<div class="banner-txt">
  <h1>.folio <br> one page <br> psd theme </h1>
  <p>simple, clear, minimal portfolio template</p>
</div>

.banner-txt {   
    font-family: 'Bebas Neue Bold', sans-serif;
    text-transform: uppercase;
    line-height: 4.11em;
    padding: 7.9rem 0rem 0 3.4rem;
    color: #ffffff;
}

.banner-txt h1 {    
    font-size: 5.625em;
}
.banner-txt p {
    font-size: 2.3em;
    margin-top: -0.45em;
    padding-left: 0.03em;
    letter-spacing: -0.008em;
}

Шрифт подключил по средствам @font-face:

@font-face {
font-family: 'Bebas Neue';
src: url('../fonts/BebasNeue/BebasNeueBold.eot');
src: local('Bebas Neue Bold'), local('BebasNeueBold'),
    url('../fonts/BebasNeue/BebasNeueBold.eot?#iefix') format('embedded-opentype'),
    url('../fonts/BebasNeue/BebasNeueBold.woff') format('woff'),
    url('../fonts/BebasNeue/BebasNeueBold.ttf') format('truetype');
font-weight: bold;
font-style: normal;

}

Помогите пожалуйста разобраться в проблеме