#font-face ie problems - css

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

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 2

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