CSS
webfont
font-awesome
FontAwesome

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

More than 3 years have passed since last update.

主な環境

  • 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
Expres          -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="Expres" 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="Expres" value="-1" />
        </customHeaders>
    </httpProtocol>
-->

無事表示されました。

試しに...

No. Cache-Control Pragma Expres 結果
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