Internet Explorer Font Face Ssl

@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



Leave a reply



Submit