EDIT 23-06-2012 10:24 (CET): Found the answer
Take a look at the bottom answer. That is what fixed the issue for me. IE9 is rendering the right way now. IE8 has a slightely different font. Not sure what font, but it looks “OK”.
Original Question:
I’ve been struggling with this for several hours now. For one of our customers we’ve designed a webshop and been developing this over a normale unsecure http connection. Since 2 days ago, we’ve installed an SSL certificate on the domain and forced every connection with the website to go over the https domain using .htaccess
But, for some reason, IE (no version) renders the font we’ve specified in the CSS using @Font-Face. Here’s on of the codes we are using for the fonts:
@font-face {
font-family: 'ProximaNovaLight';
src: url('https://www.bijouterieyvette.com/font-face/proximanova-light-webfont.eot');
src: url('https://www.bijouterieyvette.com/font-face/proximanova-light-webfont.eot?#iefix') format('embedded-opentype'),
url('https://www.bijouterieyvette.com/font-face/proximanova-light-webfont.woff') format('woff'),
url('https://www.bijouterieyvette.com/font-face/proximanova-light-webfont.ttf') format('truetype'),
url('https://www.bijouterieyvette.com/font-face/proximanova-light-webfont.svg#ProximaNovaLight') format('svg');
font-weight: normal;
font-style: normal;
}
As you can see I’m using the full link to the fonts including the https. I’ve tried moving the files to the root of the domain to match the SSL certificates domain. I also tried to use relative paths from within the CSS but also this didn’t work.
All fonts are on the domain, none of them are cross-domain.
I came across 2 other posts here on SO describing similar problems, one of the wasn’t solved, the other one was, but it didn’t seem to be the same problem. In this case the author of the question had to add Access-Control-Allow-Origin headers to the file requests of woff/ttf/otf/svg. I’ve also added these headers to my .htaccess just to be sure:
<FilesMatch "\.(woff|ttf|otf|svg)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>
</FilesMatch>
I’m kind of running out of options and thoughs. I’m no server-configuration-type-of-guy, but more into PHP/MySQL/jQuery so I guess my thoughts are rather limited compared to others here on SO.
If anyone has an option which is worth trying, just let me know!
UPDATE 22-06-2012:
If I change the https to http and refresh the page in IE, I am being prompted with the message that there is non-secure content and I have the option to accept this content. If I choose ‘YES’ my content is being loaded and… the font is available!! Yay.. However.. if I change it back to https the fonts disappear again.
Not sure what I can learn from this (lol), but maybe this gives anyone a little idea..
UPDATE 22-06-2012 #2:
Thus far I have tried:
url(‘//protocol/relative/font.eot’);
url(‘../file/relative/font.eot’);
url(‘/domain/relative/font.eot’);
url(‘https://www.secure.tld/font.eot’);
url(‘http://www.normal.tld/font.eot’); (works but with a popup “Containing non secure items in IE)
I also tried to create a rewriterule forcing the FilesMatch (woff, ttf, otf, eot, svg) to a http:// connection. That didn’t work as I thought and I haven’t got a clue wether it did anything at all..
I also added this:
AddType application/vnd.ms-fontobject .eot
AddType font/truetype .ttf
AddType font/opentype .otf
AddType font/opentype .woff
AddType image/svg+xml .svg .svgz
To the folder containing the fonts (in an .htaccess files ofcourse) aswell as in the main .htaccess file.
Besides that I tried to remove the htpasswd login, it was a wild guess, but didn’t change a thing either.
UPDATE 23-06-2012:
Checked the DirectAdmin server logs.. apparently IE is requesting the fonts (I see an eot file with the questionmark, I’m guessing this is the eot with iefix and woff being requested). Everything that’s requested is also getting a 200 OK header response, which isn’t making things more clear for me..
Still looking and searching for what could cause this problem..
Also, based on the “F12 Console Log”-thingy in IE. I can clearly see that the fonts are being requested -over https- with a 200 OK response. Strange thing is I only see 3 out of the 4 fonts I’m using, but possible the 4th isn’t being used on the mainpage.
So, I just figured out a way that is working for IE, Safara, Firefox and Chrome as far as I can see.
Since all the things I tried did not work out, I was trying to find a way that could “embed” the fonts eitherway to my websites, to my CSS or to my server. Added the font to my server wasn’t an option according to my server-guy so I decided to get back to Font-Squirrel and see if there was an option they offered in converting the fonts.
I reuploaded my fonts en chose the export mode. Somewhere around the bottom of the settings fields it says “Base64 Encode”, luckily I knew what this meant (I can imagine someone who doesn’t easily looks over this option) so I genereted my CSS files with base64 embdedded fonts.
This works flawlessly. Ofcourse this made my CSS files some kb’s bigger (5kb vs 129kb). But I don’t see a big adventage of 100kb extra with the current internet connections.
Just to compare, non base64 encoded CSS:
Base64 encoded CSS: