0

I am going nuts. @font-face won't work in IE or FireFox when I test on my client's server. My code is legit - it works just fine if I upload it to my own server, across all browsers. But no luck where I truly need it to work. I've tried re-ordering the CSS, and confirmed the fonts are indeed uploaded to the server.

I have read the info on the following links:
http://sixrevisions.com/css/font-face-web-fonts-issues/
http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/

Based on info in the first article, I tried Google's WebFont loader in case that would fix things, but no luck. I also looked at the .NET panel in Firebug but it is greek to me. I tried updating the URL paths, removing the domain based on this post: http://www.fontsquirrel.com/forum/discussion/227/font-face-not-working-in-firefox-or-ie/p1

I don't know what else to try. At this point, I have given up and told the client they can't have their fancy font but I really want to understand WHY. Any help out there?

Here's the code I'm using generated by FontSquirrel:

        @font-face {
        font-family: 'Dax';
        src: url('/fonts/dax/dax-regular-webfont-webfont.eot');
        src: url('/fonts/dax/dax-regular-webfont-webfont.eot?#iefix') format('embedded-opentype'),
             url('/fonts/dax/dax-regular-webfont-webfont.woff') format('woff'),
             url('/fonts/dax/dax-regular-webfont-webfont.ttf') format('truetype'),
             url('/fonts/dax/dax-regular-webfont-webfont.svg#Dax') format('svg');
        font-weight: normal;
        font-style: normal;
    }
        body{
                    font-family: 'Dax';
                    font-size: 25px;
                                }

Another thought just occurred to me - my client has a redirect set up on their site. Could that be why it isn't working in those browsers?

Thanks in advance for your replies.

surfbird0713
  • 1,209
  • 2
  • 23
  • 45
  • Are the font files present and in the directory you think they're in? Your urls are absolute – DiMono Feb 22 '13 at 20:05
  • the font files are definitely present - it works in Chrome and Safari, and if I plug the file name into the address bar, the browser downloads the file. Doesn't including the domain make it absolute? I've tried plugging in the URL with the domain and without, same results both cases. – surfbird0713 Feb 22 '13 at 20:48
  • Try clearing the browser cache. Probably not the problem but it is too simple not to try. You could also try direct file paths: `http://domain.com/fonts/font.ttf` which would get around any redirect/php include problems. – James Coyle Feb 22 '13 at 21:01
  • http://stackoverflow.com/questions/4358733/font-face-not-working-in-firefox/16275460#16275460 – charles Apr 29 '13 at 09:50
  • http://stackoverflow.com/questions/4358733/font-face-not-working-in-firefox/16275460#16275460 – charles Apr 29 '13 at 10:01
  • possible duplicate of [css @font-face not working with firefox, but working with chrome and IE](http://stackoverflow.com/questions/2856502/css-font-face-not-working-with-firefox-but-working-with-chrome-and-ie) – Navin Sep 27 '13 at 14:24

1 Answers1

1

firefox requires all fonts be served from the same domain....so it sounds like a cross domain problem. if not, and either way you'll need this for ie (i'm assuming), you need to add woff file type to your .htaccess file. more here: http://www.fontsquirrel.com/blog/2010/11/troubleshooting-font-face-problems

albert
  • 8,112
  • 3
  • 47
  • 63
  • are you saying its a cross domain problem because of the redirect? wouldn't the WebFont loader fix a cross domain problem? I am not sure I have access to the .htaccess file but i'll look into it. – surfbird0713 Feb 22 '13 at 21:23
  • no, i thought you were loading the fonts from your server onto a site on their server. mb if i'm wrong. if you access to their server, you should have access to .htaccess, it's in the root, and hidden by default. i use jedit for my ide and i have to check "show hidden files" in order to see/access. if that helps. – albert Feb 23 '13 at 05:00