@Font-Face won't load via https in IE
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:
@font-face {
font-family: 'ProximaNovaSemibolds';
src: url('../font-face/proximanova-semibold-webfont.eot');
src: url('../font-face/proximanova-semibold-webfont.eot?#iefix') format('embedded-opentype'),
url('../font-face/proximanova-semibold-webfont.woff') format('woff'),
url('../font-face/proximanova-semibold-webfont.ttf') format('truetype'),
url('../font-face/proximanova-semibold-webfont.svg#ProximaNovaSemibold') format('svg');
font-weight: normal;
font-style: normal;
}
Base64 encoded CSS:
@font-face {
font-family: 'ProximaNovaBold';
src: url('proximanova-bold-webfont-webfont.eot');
}
@font-face {
font-family: 'ProximaNovaBold';
src: url(data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAF+8ABMAAAAArzAAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAABqAAAABwAAAAcYT+YZ0dERUYAAAHEAAAALQAAADIC+wHsR1BPUwAAAfQAAAf7AAAURoqljoZHU1VCAAAJ8AAAACAAAAAgbJF0j09TLzIAAAoQAAAAWwAAAGB+FsNBY21hcAAACmwAAAGdAAAB+uY47ZljdnQgAAAMDAAAADoAAAA..alotmorecharacters...FDmYlYoTkE8HdsTFF2cwU74AAU/lecUAAA==) format('woff'),
url('proximanova-bold-webfont-webfont.ttf') format('truetype'),
url('proximanova-bold-webfont-webfont.svg#ProximaNovaBold') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face EOT not loading over HTTPS
I know this is an old thread but I just had to weigh in. We had the same issue with EOT and WOFF fonts in all versions of Internet Explorer (7-11) not loading over HTTPS. After hours of trial and error and comparing our headers with other working sites we found it was the vary
header that was messing things up. Unsetting that header for those file types fixed our issue right away.
<FilesMatch "\.(woff)$">
Header unset Vary
</FilesMatch>
<FilesMatch "\.(eot)$">
Header unset Vary
</FilesMatch>
Bonus Reading
- Eric Lawrence: Vary with Care (archive)
- IE Blog: Caching Improvements in Internet Explorer 9 (archive)
Icon fonts not loading in IE11
Ran into a similar problem, and from your screenshot above, the response has a Cache-Control header of 'no-store'. IE seems to have issues with caching and fonts.
Removing both the 'Cache-Control: no-store' and the "Pragma: no-cache" headers worked for us to get icon fonts to show up again.
https://github.com/FortAwesome/Font-Awesome/issues/6454
@font-face not loading in IE8
Firstly I would check that the font files are actually being served. It could be as silly as a relative path not being correct - although in this case I doubt it. Use a tool like Charles or Fiddler for this. These tools should always be the first port of call for checking that files are being served as expected.
I would also check that the extensions/mime types are set up in the site's config, or in IIS's config.
IE 11 sometimes preventing the display of font-awesome webfonts
IE Security Settings
I have noticed sites in the "Restricted Sites" (in Internet Explorer) do not show font awesome whereas sites in "trusted sites" zone do.
So I'd guess the issue is with different IE security settings for different users.
Can you ask users to check / change their options in IE e.g. (instruction for IE 11 but others will be very similar) :
- Settings Cog (icon in top right)
- Internet Options (menu option)
- Security (tab)
- Sites (button)
- Enter the website address for your site
- Click Add (button)
N.B. if you are not using https you may also need the option
- "Require server verification (https:) for all sites in this zone" -
to be deselected
Request a User makes these changes and then troubleshoot from there.
Fiddler to debug
If you have access to any of the user's machines, can remote in, or have any advanced users you can guide then could also attempt to debug using the excellent Fiddler http proxy on their machine to see what is happening at the http request / response level.
You can also change your own IE security settings to see if you can replicate the problem
Related Topics
How Does Hexadecimal Color Work
Immediate Child Selector in Less
How to Set a Common Image Path for Less Files
How to Generate CSS with Loop in Less
Rotating Table Header Text with CSS Transforms
Set Bootstrap Navbar Transparency on Scroll
How to Make Circular Background Using CSS
Are There Any Tools for Merging CSS
How to Have Different Colored Left and Top Borders in CSS with Straight Join
CSS Which Takes Precedence, Inline or the Class
Amp: How to Toggle a CSS Class
How to Change the Size of a Bootstrap Checkbox
CSS Transition Opacity Fade Background
Looping Animation of Text Color Change Using CSS3
When to Use "!Important" to Save the Day (When Working with CSS)