@font-face issues

Question

I have done this before, but still haven't mastered it. I downloaded a font kit from fontsquirrel.com and tried to get my custom font to work on my site. I have tried so many variations including the "bullet proof" methods found online that I have now confused myself. Could someone look at the code below and show me how to correctly get a custom font to work on a website using @font-face?

I have a style sheet named fonts.css located in a folder named css. This is being used to call the custom font. The font files are located in a folder from the root named fonts.

The css for the style sheet fonts is:

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

The other styles sheets for layout, etc call the font like this:

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

Anything obvious? Of course, it works locally on my machine because I have the font installed.

Answer 1

In #merchandise h1, font-family: "Bebas Neue" needs to be font-family: "BebasNeueRegular"

or

In @font-face, font-family: 'BebasNeueRegular' needs to be font-family: 'Bebas Neue'