Can't get the Bebas Neue Custom Font to work

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

Technical note: use WOFF/WOFF2, don't use any of the other formats - they were necessary in the past, but haven't been necessary for years now. See http://stackoverflow.com/a/37091681/740553 for more detailed information. — Mike 'Pomax' Kamermans, Jan 16 '17 at 17:52

score 2 · Answer 1 · answered Jan 16 '17 at 15:58

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!

More explicitly: The path for url in the css font face declaration needs to match *as seen from the location of that css file*. — kontur, Jan 18 '17 at 13:35

score 1 · Accepted Answer · answered Jan 16 '17 at 15:02

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

Can't get the Bebas Neue Custom Font to work

2 Answers2