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

Maybe some path issue. The path must be relative to the CSS's url. So when CSS is in a folder 'css' and fonts are in folder 'onts' you need to write `url('../fonts/[...]')` — yunzen, Mar 14 '12 at 16:14
okay I will try this now, but why would it work for the other font types and not the .eot file? — radleybobins, Mar 14 '12 at 16:15
seems like the paths are correct to me, my css file is in my main folder with all of my .php files, then there is a folder called fonts — radleybobins, Mar 14 '12 at 16:17

score 5 · Accepted Answer · edited May 23 '17 at 12:17

5

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;

}

edited May 23 '17 at 12:17

Community

1
1

answered Mar 14 '12 at 16:18

yunzen

32,854
11
73
106

right, that is how it came, but I had changed the file names...I will go back and try it this way. – radleybobins Mar 14 '12 at 16:19
On font squirrel there is not Open Type for BebasNeue – yunzen Mar 14 '12 at 16:20
Are you sure, that IE supports it? http://webfonts.info/wiki/index.php?title=@font-face_browser_support – yunzen Mar 14 '12 at 16:25
this still did not work. I have the original .otf file, thats what firefox and chrome have been using – radleybobins Mar 14 '12 at 16:28
Maybe repeat the eot url with the #iefix thing – yunzen Mar 14 '12 at 16:28
I am pretty sure that IE supports it as long as you have the .eot file...I have been trying to use the method on this site: http://blog.themeforest.net/tutorials/how-to-achieve-cross-browser-font-face-support/, but haven't been able to get it to work yet. – radleybobins Mar 14 '12 at 16:30
damn! I had so much hope that that was going to work, but still the same result. It's so weird, this was all working fine until IE updated on my computer, now it doesn't work on any version of IE...I know that is just a coincidence, but its frustrating as shit. – radleybobins Mar 14 '12 at 16:40
If not. inspect the network on IE with the developer tools (Press F12). Which files are loaded? – yunzen Mar 14 '12 at 16:40
okay! now at least we are getting somewhere, it's not loading the font-face stuff at all in IE, it doesn't even show @font-face in the css...not quite sure what to do about that – radleybobins Mar 14 '12 at 16:43
I inspected the network on the font-squirrel page: http://imageshack.us/photo/my-images/442/fontsquirrel.png/ – yunzen Mar 14 '12 at 16:45
I'm getting this message in the console: CSS3114: @font-face failed OpenType embedding permission check. Permission must be Installable. BebasNeue.otf – radleybobins Mar 14 '12 at 16:50
Look here: http://stackoverflow.com/questions/5065362/ie9-blocks-download-of-cross-origin-web-font – yunzen Mar 14 '12 at 16:54
Do your domains differ? Maybe Page www.example.com and CSS on example.com? – yunzen Mar 14 '12 at 16:58
Okay, using that website eventually lead me to this one: http://www.fontspring.com/blog/further-hardening-of-the-bulletproof-syntax. I just started over and it finally worked...I'll update my code up top correctly. Thanks for working with me. – radleybobins Mar 14 '12 at 18:33

Alaa Badran · Answer 2 · 2016-07-31T07:02:00.400

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

edited Jul 31 '16 at 07:02

answered Mar 14 '12 at 17:01

Alaa Badran

1,848
15
19

2

So when I tried this, I got an error in IE CSS3111: @font-face encountered unknown error. BebasNeue.eot.eot...I removed one of the .eot and got a similar error. – radleybobins Mar 14 '12 at 18:05
The file definitely exists in the file location – radleybobins Mar 14 '12 at 18:13

score 0 · Answer 3 · edited Feb 04 '16 at 14:30

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

score 0 · Answer 4 · answered Mar 14 '12 at 15:54

0

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.

answered Mar 14 '12 at 15:54

Alaa Badran

1,848
15
19

@font-face ie problems

4 Answers4

Linked