Frames in Internet Explorer 9: CSS styles not loaded correctly

Question

I have a web site with URL http://myapp.herokuapp.com/welcome.php and I am redirecting a domain www.example.com to that PHP page as FRAME. When I try to load www.example.com from IE9, I get this error:

CSS3111: @font-face encountered unknown error. abeatbyKai.TTF

That font is placed here: http://myapp.herokuapp.com/common/fonts/abeatbyKai.TTF

My CSS file is called from welcome.php like this:

<link rel="stylesheet" href="css/iflikeu.welcome.0.1.css" type="text/css" />

This is the code of my CSS:

@font-face {
    font-family: 'abeat';
    src: url(../common/fonts/abeatbyKai.TTF);
}

If I enter as src: url('http://myapp.herokuapp.com/common/fonts/abeatbyKai.TTF'); still doesn't work.

Another example: this image is loaded from welcome.php like this

<a id="enLang" class="btn lang_flag" href="#" onclick="changeLanguage('userLangWelcome','en');"><img src="common/images/flags/en.png"/></a>

On the CSS file, this is the code:

.lang_flag img {
    width: 25px;
    height: 12px;
    vertical-align: middle;
}

However, the image is not displayed. Just the button ( btn ).

This error only occurs in IE when there is a FRAME redirection. If I load directly http://myapp.herokuapp.com/welcome.php from IE it works, and www.example.com from any other browser works as well.

Any ideas? Thanks

Answer 1

IE doesn't allow fonts to be loaded from external domains by default. See this thread .

Maybe you need to actually set the Access-Control-Allow-Origin HTTP Header on the domain that contains the frame.

On a side note, if you are only using a frame because you want your heroku app to show on your own domain name, you should take a look at the Custom Domains Heroku article -- you could just point your domain name at your heroku app.

Answer 2

try this, IE is such a pain in the ass when it comes to anything:

@font-face {
font-family: 'FFFTusjBold';
src: url('FFF_Tusj-webfont.eot');
src: url('FFF_Tusj-webfont.eot?#iefix') format('embedded-opentype'),
     url('FFF_Tusj-webfont.woff') format('woff'),
     url('FFF_Tusj-webfont.ttf') format('truetype'),
     url('FFF_Tusj-webfont.svg#FFFTusjBold') format('svg');
font-weight: normal;
font-style: normal;

}
<!--[if IE]>
font-family: 'FFFTusjBold';
src: url('FFF_Tusj-webfont.eot');
url('FFF_Tusj-webfont.eot?#iefix') format('opentype');
}
-->