今日調べて分かったのでメモ。

最近のFirefox, IEでは、クロスドメイン制約があるため、デフォルトでは異なるドメインのWebフォントを読み込めません。

サーバー側のレスポンスヘッダにAccess-Control-Allow-Originを指定すればいいのですが、Amazon S3の場合は以下のようにします。

S3 Management Console をブラウザで開いて、画面右の「CORS Configuration(下の図 赤丸の部分)」を

image

以下のように編集します:

    <CORSConfiguration>
        <CORSRule>
            <AllowedOrigin>*</AllowedOrigin>
            <AllowedMethod>GET</AllowedMethod>
            <MaxAgeSeconds>3000</MaxAgeSeconds>
            <AllowedHeader>*</AllowedHeader>
        </CORSRule>
    </CORSConfiguration>

これで、Webフォントが読み込まれるようになります。

参考: CORS(Cross-Origin Resource Sharing)によるクロスドメイン通信の傾向と対策 ｜ Developers.IO