Webフォント(FontAwesome)がIE11で読み込まれない現象について

主な環境

• Internet Explorer 10 or 11
• IIS 7.5
• HTTP 5
• Font Awesome 4.3.0 (WebServer上に配置）

発生している現象

• ページが読込まれた際に、FontAwesomeのアイコンが表示されない。
• CDNを使用した場合は、正常に表示される。
• FireFox 40.0.2，Google Chrome 44.0.2403.155 m　では正常に表示される。

正常時と異常時の差異

正常時（CDN使用）の取得WebFontファイル

URL(一部)	プロトコル	メソッド	結果	種類	イニシエーター
fontawesome-webfont.eot?#iefix&v=4.3.0	HTTPS	GET	200	application/vnd.ms-fontobject	@font-face

fontawesome-webfont.eot　レスポンスヘッダー

Response					HTTP/1.1 200 OK
Date						Thu, 20 Aug 2015 04:56:50 GMT
Content-Type				application/vnd.ms-fontobject
Transfer-Encoding			chunked
Connection					keep-alive
Last-Modified				Thu, 22 Jan 2015 19:53:40 GMT
ETag						W/"f7c2b4b747b1a225eb8dee034134a1b0"
Server						NetDNA-cache/2.2
Expires						Sun, 14 Aug 2016 04:56:50 GMT
Cache-Control				max-age=31104000
Access-Control-Allow-Origin	*
X-Hello-Human				You should work for us! Email: [e-mail] or @MaxCDNDeveloper on Twitter
X-Cache						HIT

異常時の取得WebFontファイル

URL(一部)	プロトコル	メソッド	結果	種類	イニシエーター
fontawesome-webfont.eot?	HTTPS	GET	200	application/vnd.ms-fontobject	@font-face
fontawesome-webfont.woff?v=4.3.0	HTTPS	GET	200	application/x-font-woff	@font-face
fontawesome-webfont.ttf?v=4.3.0	HTTPS	GET	200	application/x-font-ttf	@font-face

fontawesome-webfont.eot　レスポンスヘッダー

Response		HTTP/1.1 200 OK
Cache-Control	no-cache, no-store
Pragma			no-cache
Content-Type	application/vnd.ms-fontobject
Last-Modified	Thu, 16 Jul 2015 06:26:58 GMT
Accept-Ranges	bytes
ETag			"446f166b90bfd01:0"
Server			Microsoft-IIS/7.5
X-Powered-By	ASP.NET
Expires			-1
Date			Thu, 20 Aug 2015 04:47:18 GMT
Content-Length	60676

原因発見？

FontAwesomeのwikiにトラブルシューティングページに、以下のような記述がありました。

I'm hosting fonts on my server for my website and icons don't show up
Please check server's MIME types
Please check for CORS
For Internet Explorer, please check that you don't serve files with "no-store" option in Cache-control header

自身のサーバーにFontsファイルを配置していてIconが表示されない場合

1. サーバー上のMIMETypesを確認
2. CORSを確認
3. IEの場合は、HeaderのCache-controlオプションに"no-store"が無いかを確認

(1.)はContent-Typeが正常に読込まれている為、OKとする。
(2.)は同じサーバ・サイトにCSSやWebFontを配置している為、OKとする。
(3.)は・・・確かにCache-Controlにno-storeが返ってきている。。。

対応方法

現状のWeb.configに以下のような定義を発見。

Web.config

    <httpProtocol>
        <customHeaders>
            <add name="Cache-Control" value="no-cache, no-store" />
            <add name="Pragma" value="no-cache" />
            <add name="Expires" value="-1" />
        </customHeaders>
    </httpProtocol>

全力でno-storeを設定しとるやないかい！！
ってことで、上記の定義を丸々コメントアウト。

Web.config

<!--
    <httpProtocol>
        <customHeaders>
            <add name="Cache-Control" value="no-cache, no-store" />
            <add name="Pragma" value="no-cache" />
            <add name="Expires" value="-1" />
        </customHeaders>
    </httpProtocol>
-->

無事表示されました。

試しに．．．

No.	Cache-Control	Pragma	Expires	結果
1	no-cache	no-cache	-1	ＮＧ
2	no-cache	no-cache	削除	ＮＧ
3	no-cache	削除	-1	ＯＫ
4	no-cache	削除	削除	ＯＫ
(1)，(2)の通り、"Pragma" の値も動作に影響があるそうです。
Cache-Controlを指定していれば無視されると思っていたのですが、単純にそうではないのかも？

また、Cacheを削除してから再読込をした場合でも、
正常に動作する設定の時はアイコンがちゃんと表示されました。

"no-store" を有効にしたまま表示させるには？

分かりません（
今回の件を含めても、大人しくCDNを使ってしまうのが単純な回避策になると思う。

ただ、読込まれるWebFontファイルのレスポンスヘッダーにある
"Cache-Control：no-store" や "Pragma：no-cache" が根本の原因になっているような気もするので、
どうにかそこを回避すればCDNを使わなくてもいけるのかもしれない。

どなたか分かる方いらっしゃいましたら、教えてください（（

参考サイト

Troubleshooting · FortAwesome/Font-Awesome Wiki · GitHub