LoginSignup
14
14

More than 5 years have passed since last update.

Cross-OriginでWebフォントを使うとき注意すべきこと

Last updated at Posted at 2014-07-20

皆さん、Webフォント使ってますか?

Qiitaでも有名なアイコンフォントが使われてますね。FontAwesomeです。

今のところStableだとかBetaのChromeでQiitaを見ても何の問題も無いでしょう。(今回の辺りでは。)

しかし、うちのChrome(38)ではこのようになってしまいます。

Chrome38.png

見事に豆腐です。

Why?

ここでDevツールを開いてエラーログを見てみましょう。
Chrome38log.png

そう。QiitaのFontAwesomeはcdn.qiita.comと言うCDNを経由して配信されていたんですね。でもChrome38以降のBlinkではフォントに対してもOriginチェックがあるらしい…

ちなみに

Chrome37.png
このことはChrome37までで既に予告されてたんですね。(手元にあったのがChromium37だったのでそれ以前のは確認できてませんが。)

まとめ

CDNとか経由してフォント配信する際はクロスオリジン許可してやるのをお忘れなく!


追記 7/22 Qiitaの対応

とりあえず修正されたっぽいので確認してみることに…

スクリーンショット (362).png
うん、豆腐が消えたね!いつも通りのQiitaだよ!

14
14
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
14
14