Edited at

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: jdorfman+theheader@maxcdn.com 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
NG

2
no-cache
no-cache
削除
NG

3
no-cache
削除
-1
OK

4
no-cache
削除
削除
OK

(1),(2)の通り、"Pragma" の値も動作に影響があるそうです。

Cache-Controlを指定していれば無視されると思っていたのですが、単純にそうではないのかも?

また、Cacheを削除してから再読込をした場合でも、

正常に動作する設定の時はアイコンがちゃんと表示されました。


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

分かりません(

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

ただ、読込まれるWebFontファイルのレスポンスヘッダーにある

"Cache-Control:no-store""Pragma:no-cache" が根本の原因になっているような気もするので、

どうにかそこを回避すればCDNを使わなくてもいけるのかもしれない。

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


参考サイト

Troubleshooting · FortAwesome/Font-Awesome Wiki · GitHub