Grow your CSS skills. Land your dream job.

Font family not working in IE9 (but all other IEs)

  • # December 28, 2012 at 5:28 pm

    I’m kinda embarrassed that I have to ask this, but can anyone point me in the right direction why my font-family declaration of “Alternate Gothic” is not working in IE9? It’s fine in other IEs.

    Site: http://www.senff.com
    Fonts: all article titles and also sidebar title (“NEW SITE, RESPONSIVE AND ALL!” and such)

    I’ve used the following code:

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

    I’ve checked if http://newww.senff.com/wp-content/themes/senff/fonts/alternate_gothic.eot is there, and I’d say it is. Tried some solutions that Google is giving me, but didn’t see any that might have been the problem. I’m also not at home so I can’t fully test/try things….so if anyone sees what it could be, please let me know.

    Thanks for your help!

    # December 28, 2012 at 6:37 pm

    @Senff Try giving the IE6-IE8 fix an absolute URL. See if that works. But it seems like a bad URL.

    # December 28, 2012 at 7:13 pm

    Official error from the IE9 console is;

    CSS3117: @font-face failed cross-origin request. Resource access is restricted.

    # December 29, 2012 at 4:33 am

    @chrisburton: tried it, doesn’t seem to work. Full path is http://newww.senff.com/wp-content/themes/senff/fonts/alternate_gothic.eot , looks like that’s the correct path so I’m not sure why it would be a bad URL?

    See http://newww.senff.com/wp-content/themes/senff/stylesheets/default.css

    # December 29, 2012 at 4:53 am

    http://cloud.chrisburton.me/LqsI

    Fix this line:

    url(‘../fonts/alternate_gothic.eot/fonts/alternate_gothict.woff’) format(‘woff’), /* Modern Browsers */

    # December 29, 2012 at 6:10 am

    Have you done all the mime type related gumpf in your .htaccess?

    # December 29, 2012 at 8:46 am

    @chrisburton : i think that slipped in when I was trying to “fix” things, but even when it’s corrected now, no dice.

    @andy_unleash : I haven’t done anything in .htaccess — but then again, I never had to before. This is the first time I ever had problems with font-family on my site, ever. All other sites running never had any issues.

    BUT! That led me to try something. It seems that it’s all working fine when I go to http://newww.senff.com directly; looking at the site on that location, it’s all working now. So it’s clear that there is a problem with the “connection” between www.senff.com and newww.senff.com.

    (Reason is that my site is located in the folder “newww” but that I don’t want people to have to enter that folder name in the URL)

    So there’s definitely something wrong with that forwarding thing, when WordPress is not in the root of the site but I set it to have the HOME url in the root and not the main WordPress location and bla bla bla…..confusing to say the least. I think I’m just going to move everything to the root again, less confusing and such.

    So anyways, it’s working for now, even though there’s other things that’s not that great. Menu is not sticky in IE9 for example but I can’t be all too bothered to look into that right now.

    Thanks guys for helping me :)

    # December 29, 2012 at 10:18 am

    @senff – now you’ve explained the site structure the error makes sense. Basically it’s IE9 cross domain blocking. Reading on StackOverflow apparently adding this to HTAccess can cure the issue;



    Header set Access-Control-Allow-Origin “*”

    # December 29, 2012 at 10:39 am

    @andy_unleash I’ll give that a try.

    EDIT: never mind previous long reply. Will use http://www.senff.com/newww instead of newww.senff.com (point to the same folder anyway)!

    # December 29, 2012 at 11:25 am

    @senff I think @andy_unleash had the answer with htaccess.

    # December 29, 2012 at 1:01 pm

    @Chrisburton : indeed. So to recap: the site was located on www.senff.com, whereas the stylesheets (and fonts) were located on newww.senff.com. Because of the different domains, IE9 basically said “neh, can’t display those fonts from a different domain on your site there!

    .htaccess could have fixed that but I’d rather elimate any problems altogether, than to fix them. :)

    # June 12, 2013 at 1:37 am

    @ChrisBurton relevant???

    # June 12, 2013 at 1:50 am

    @tannercampbell It is. Don’t you have this in your htaccess already?

Viewing 13 posts - 1 through 13 (of 13 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".