Can't get the Bebas Neue Custom Font to work - css

Question

I'm trying to get the Bebas Neue font to work, I've managed to convert my fonts into their respective types but whenever I load the font in the browser I get errors.
Firebug throws:
downloadable font: download failed
Chrome throws a 404 not found.
I initially had these in their own font folder, but I then decided to move the fonts to the same directory as the stylesheet I was using to try and rule out location problems.
This particular file is a SASS partial called _typography that lives in a folder called global this is the same folder I've directly placed all the fonts into as is.
#font-face {
font-family: 'BebasNeueRegular';
src: url(BebasNeueRegular.eot);
src: url(BebasNeueRegular.eot?#iefix) format('embedded-opentype'),
url(BebasNeueRegular.woff) format('woff'),
url(BebasNeueRegular.ttf) format('truetype'),
url(BebasNeueRegular.svg) format('svg');
font-weight: normal;
font-style: normal;
}

Answer 1

With a 404 Error - it's 98% going to be because of the path being wrong.
Just a thought - you mentioned that you moved them into a SASS partial? Can this folder be accessed from the site? From my experience, your SASS is going to compile into some sort of public directory.
In order to troubleshoot... theoretically, you should just be able to add www.yourdomaincom/path-to-font/font.eot and come up with a download file.
If you're not, then it really is an issue of the path being where the error lies. As far as why other fonts are working, I wouldn't be able to say without taking a better look at how you have your project set up.
Just my two cents worth to help you troubleshoot!

Answer 2

Make sure your #font-face matches your font-family use on CSS, either:
font-family: 'Bebas Neue'; on everything or:
font-family: 'BebasNeueRegular'; on everything.
Like:
#font-face {
font-family: 'BebasNeueRegular';
src: url(BebasNeueRegular.eot);
src: url(BebasNeueRegular.eot?#iefix) format('embedded-opentype'),
url(BebasNeueRegular.woff) format('woff'),
url(BebasNeueRegular.ttf) format('truetype'),
url(BebasNeueRegular.svg) format('svg');
font-weight: normal;
font-style: normal;
}
Matches css use:
.selector {
font-family: 'BebasNeueRegular', sans-serif;
}
Or:
#font-face {
font-family: 'Bebas Neue';
src: url(BebasNeueRegular.eot);
src: url(BebasNeueRegular.eot?#iefix) format('embedded-opentype'),
url(BebasNeueRegular.woff) format('woff'),
url(BebasNeueRegular.ttf) format('truetype'),
url(BebasNeueRegular.svg) format('svg');
font-weight: normal;
font-style: normal;
}
Matches:
.selector {
font-family: 'Bebas Neue', sans-serif;
}