1

I have a very annoying problem. One of our customers have requested that we use a non standard font on their site that I have embedded using font-face. The font files are located on our server, and this works fine in all web browsers when not using https. I have been using opentype fonts for most browser and .woff files for IE. The problem comes when we add https, then these fonts will no longer load into IE all versions! It still works fine in all the other web browser, just not IE!

The pages are served using IIS, so that makes all the answers that relate to Apache servers irrelevant. The customer have paid to be able to use the font files, but this does not prevent them from being banned from upload to Font Squirrel, so coding them into 64 format is not a viable solution either.

I have noticed that it only have a problem loading the fonts. If I turn off https the fonts will load, and if I turn https back on without taking a hard refresh to my browser, the page will still display with the right fonts, but the fonts disappear if I do a hard refresh!

Anyone having any idea how this can be solved?

I will also add the actual css code here:

@font-face{
    font-family: 'FranklinGothic';
  src: local("Franklin Gothic Std Extra Condensed"), url( /font/FranklinGothicStd-ExtraCond.otf ) format("opentype");   
}

@font-face{
    font-family: 'FranklinGothicIE';
    src: url(/font/franklingothicstd-extracond.woff) format('woff'); /* IE */   
}

@font-face{
  font-family: 'FranklinGoth';
  src: local("Franklin Gothic Std Extra Condensed"), url( /font/ITCFranklinGothicStd-DmCd.otf ) format("opentype"); 
}

@font-face{
    font-family: 'FranklinGothIE';
    src: url(/font/66864014-ITCFranklinGothic-Std-DmCd.woff) format('woff'); /* IE */   
}
NorwegianDeveloper005
  • 31
  • 1
  • 7
  • Can you please post your CSS where the fonts are defined for all browsers? – Rob Allen Jun 16 '14 at 14:39
  • Here is the css:@font-face{ font-family: 'FranklinGothic'; src: local("Franklin Gothic Std Extra Condensed"), url( /font/FranklinGothicStd-ExtraCond.otf ) format("opentype"); } @font-face{ font-family: 'FranklinGothicIE'; src: url(/font/franklingothicstd-extracond.woff) format('woff'); /* IE */ } What is important is that this works in Chrome, Firefox and IE without https! It seems that IE in https does not attempt to load the fonts at all, as it does not try to load the .otf format either. – NorwegianDeveloper005 Jun 17 '14 at 06:28
  • Thanks for posting the CSS. Now, using Fiddler or DeveloperTools can you watch the request from IE and post what the response is please? You may have a security or MIME error in your Web.Config and that will help isolate if there is. – Rob Allen Jun 17 '14 at 14:35
  • Just out of curiosity: why WOFF for IE? Why not use the OTF? – RoelN Jun 20 '14 at 09:13
  • The otf files did not work for IE. I also tried eot files for IE, with the same results. – NorwegianDeveloper005 Jun 21 '14 at 10:12
  • I'm having the same issue. Under Network tab it says "Received: 3.29 KB" over HTTP, but "Received: 482 B" over HTTPS. Content-Length is 3032 bytes in both cases. So 3032 bytes are transferred over the wire, but somehow IE says it's 482 bytes. Did you find any solution to this problem? – Gaui Sep 14 '15 at 15:30

2 Answers2

0

I found the answer in this post where there was a suggestion to remove Cache-control. Once I added this to my web.config it worked in IE:

<system.webServer>
    ...
    <httpProtocol>
        <customHeaders>
            <remove name="Cache-control"/>          
        </customHeaders>
    </httpProtocol>
</system.webServer>
Community
  • 1
  • 1
James_2195
  • 1,113
  • 1
  • 12
  • 17
0

I had the same problem. I just had to convert the virtual directory to an application. The web.config didn't contains the remove of Cache-Control, but add mime-type for woff2

Fabske
  • 2,106
  • 18
  • 33