@font-face ie problems

Question

I have tried a few different ways to include the correct fonts in the CSS. I know that I need the eot version for the font to work on IE, but I can't get it to recognize it. I have used font squirrel to convert the fonts, and I have placed the .eot file and .otf file in a folder called "fonts" Here is my CSS:

@font-face {
    font-family: BebasNeue;
    src: url('fonts/BebasNeue.eot');
    src: url('fonts/BebasNeue.otf') format("opentype");
}

UPDATE So through suggestions from below, I was led to this site: http://www.fontspring.com/blog/further-hardening-of-the-bulletproof-syntax

I used the CSS:

@font-face {
font-family: 'BebasNeue';
src: url('fonts/bebasneue.eot'); /* IE9 Compat Modes */
src: url('fonts/bebasneue.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
     url('fonts/bebasneue.woff') format('woff'), /* Modern Browsers */
     url('fonts/bebasneue.ttf')  format('truetype'), /* Safari, Android, iOS */
     url('fonts/bebasneue.svg#svgBebasNeue') format('svg'); /* Legacy iOS */
}

Then I went back to Font Squirrel, downloaded the kit fresh again, and renamed everything correctly, and it worked.

Answer 1

This code should make it work.. if not, check your font URL (if it exists).

@font-face {
  font-family: 'BebasNeue';
  src: url('fonts/BebasNeue.eot');
  src: local('BebasNeue'), local('BebasNeue'), url('fonts/BebasNeue.eot') format('embedded-opentype');
}

Answer 2

You need to set Access-Control-Allow-Origin HTTP Header for this
See here:
IE9 blocks download of cross-origin web font

---

Does this work?

@font-face {
    font-family: 'BebasNeue';
    src: url('fonts/BebasNeue.eot');
    src: url('fonts/BebasNeue.eot?#iefix') format('embedded-opentype'),
         url('fonts/BebasNeue.otf') format("opentype");
}

---

On Fontsquirrel they do it this way
http://www.fontsquirrel.com/fontfacedemo/bebas-neue

Download the @font-face kit from there

@font-face {
    font-family: 'BebasNeueRegular';
    src: url('/utils/load_demo_font.php?font=960/BebasNeue-webfont.eot');
    src: url('/utils/load_demo_font.php?font=960/BebasNeue-webfont.eot?#iefix') format('embedded-opentype'),
         url('/utils/load_demo_font.php?font=960/BebasNeue-webfont.woff') format('woff'),
         url('/utils/load_demo_font.php?font=960/BebasNeue-webfont.ttf') format('truetype'),
         url('/utils/load_demo_font.php?font=960/BebasNeue-webfont.svg#BebasNeueRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}

Answer 3

Sometimes when you convert font type (other that TTF) the font doesn't work.. Try to use TTF font and convert it..

I didn't experience that with TTF fonts.. but i did with other font types.

Answer 4

This is the css I have for Bebas on our site (not Neue), but note the URL:

@font-face {
    font-family: 'Bebas';
    src: url('../fonts/bebas-webfont.eot');
    src: url('../fonts/bebas-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/bebas-webfont.ttf') format('truetype'),
         url('../fonts/bebas-webfont.svg#bebasregular') format('svg');
    font-weight: normal;
    font-style: normal;
}