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