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

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

3

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.

edited May 23 '17 at 12:04

Community

1
1

answered Nov 04 '12 at 14:35

Michael Frederick

16,664
3
43
58

Thank you Michael, I will have a look into that header. Should be on my .com domain settings, right? – Nov 04 '12 at 14:52
About the domain. My app is on index.php file (because Facebook requires it, right?) but the corporate website is on welcome.php. When a user types www.myexample.com I want him to go to the corporate website, not the Facebook app. That is why I am not setting the domain on Heroku. – Nov 04 '12 at 14:55
1

In php you can use the header function to set the header. i.e. header('Access-Control-Allow-Origin: *'). But to forward the domain to your heroku domain, you would need to alter your domain settings. – Michael Frederick Nov 04 '12 at 14:56
I just added that header on my welcome.php but still doesn't work. And would that fix as well the image issues I posted along with the fonts? – Nov 04 '12 at 15:31
As I said, seems that Canvas URL on Facebook only accepts a domain, not a specific file, so that I have to keep the app on index.php and the corporate on welcome.php, with example.com redirecting to welcome.php (as it is right now). – Nov 04 '12 at 15:32
1

I don't think adding the header to your welcome.php page is the solution, I think you need to add it to the page that contains the frame. If example.com renders welcome.php in a frame, then on example.com I believe you would need to add that header. – Michael Frederick Nov 04 '12 at 15:41

score 1 · Answer 2 · answered Nov 10 '12 at 19:10

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

Frames in Internet Explorer 9: CSS styles not loaded correctly

2 Answers2