Проблемы с @font-face

Я делал это раньше, но до сих пор не освоил его. Я загрузил набор шрифтов с сайта fontsquirrel.com и попытался заставить мой пользовательский шрифт работать на моем сайте. Я пробовал так много вариантов, включая «пуленепробиваемые» методы, найденные в Интернете, что теперь сам запутался. Может ли кто-нибудь взглянуть на приведенный ниже код и показать мне, как правильно заставить собственный шрифт работать на веб-сайте с помощью @font-face?

У меня есть таблица стилей с именем fonts.css, расположенная в папке с именем css. Это используется для вызова пользовательского шрифта. Файлы шрифтов находятся в корневой папке с именем fonts.

CSS для таблицы стилей fonts:

@font-face {
    font-family: 'BebasNeueRegular';
    src: url('../fonts/bebasneue-webfont.woff') format('woff'),
        url('../fonts/bebasneue-webfont.ttf') format('truetype'),
        url('../fonts/bebasneue-webfont.webfontABYyK1dn') format('svg');
    font-weight: normal;
    font-style: normal;

Другие таблицы стилей для макета и т. д. вызывают шрифт следующим образом:

}
#merchandise h1 {
    font-family: "Bebas Neue", Arial, Helvetica, sans-serif;
    font-size: 33px;
    font-weight: normal;
    line-height: normal;
    text-transform: uppercase;
    letter-spacing: 1px;
}

Что-нибудь очевидное? Конечно, он работает локально на моей машине, потому что у меня установлен шрифт.