WEBフォントとクロスドメイン問題で、フォントに問題が出るのかテストしてみました。


というつぶやきを見て、WEBフォントのクロスドメイン問題がある事を知りました。

検索してみると、

ウェブフォントのクロスドメイン問題について〜WEBフォントトラブルTIPS1

等たくさん、WEBフォントとクロスドメインに言及する記事がありました。

さくらのサーバーだとIE9以降でwebfontが文字化けする

といった記事へのリンクが貼られていおり、現実にそのような問題が発生しているのかをチェックしてみました。

私は、現在WordPressのテーマ、Raindropsにて、Google WEB Fontを自由に記述できるCSSクラスを実装中で、次のバージョンでは、Noto Sans Japanese 等、earlyaccess fontについても、スペース2つまでの全言語向けのフォントを利用可能にする実装を進めているところだったので、WEBフォントが適用できない環境が、普通に存在しそうな雰囲気は 気になって仕方がなかったのです。

さくらサーバーのスタンダードクラスを利用して、テストを行ってみました。

結論を先に書くと、特にそのような問題を(力量の問題かも)発見できませんでした。

テストと称して、お試ししてみた事

  • WordPressをインストールし、Raindropsテーマ(1.268で公開予定のバージョン)をインストール 実際にWEBフォント( Google font )が適用されるかどうかを調べてみました。結果:GoogleFont
  • Font awesomeが表示可能かどうかもテストしてみました。結果:FontAwesome

fontawesome は、CDNからstyleをロードしました。

Raindropsの場合、編集画面のカスタムフィールドから、link要素をヘッダーに埋め込み、シングルページに適用できるのでその方法を使って埋め込みました。

Font-Awesome-4-0-3

(meta というカスタムフィールドで、ヘッダーに埋め込みました )

クロスドメインを許可するヘッダーは、以下のように実装しました

functions.php

html lintでレスポンスヘッダーを表示した結果です。

ヘッダー追加前

ヘッダー追加後

Google Fontの結果

テーマ開発用のUNIT TEST(WEBフォントを使って検査用に書いているコンテンツ)をコピーして、同じフォントが反映するかどうかテストしてみました。

webfont-sakura-ne-jp-wp10

Chrome39.0.2171.95 Firefox35.0 IE11(エミュレーションでIE8,9,10)では、フォントが崩れたり表示できなくなることはありませんでした。

Font Awesomeの結果

awesome-sakura-ne-jp-wp

フォントによっては、表示されないものがありましたが、表示された結果は、firefox35 も chrome も 同じ結果でした。

ヘッダーを、付加した場合と、付加しない場合の結果についても、数回切り替えて表示してみましたが、同じ結果でした。

1/23 追記

screencapture-font-awesome

font awesomeのCSSをテーマに実装している Huemanで、表示状態を確認してみたのが、上記の画像ですが、CDNからロードしているものと異なり、すべてのアイコンが正しく表示されていました。

なぜそうなっているのか、詳細を調べてはいませんが、テーマにCSSを付属させた方がいい結果を生むのかもしれません。

Raindrops テーマでのフォントの再現テスト結果

以下は、Raindropsテーマで、fontsディレクトリにawesome fontを配置して、

としてCSSをロードした結果です。

すべてのフォントは、正常に表示されました。

screencapture-local-fontawesome

1/23 追記

font-error

コアに実装されているダッシュアイコンをテーマに適用してみましたが、firefox35 文字化けが発生しました。

Chromeは、ログアウト後文字化け

理由は調査中

関連しそうなリンク

まとめ

残念ながら、今回のテストでは、問題を発見するに至りませんでしたが、WordPressでは、ヘッダーの追加が必要な場合、send_headersというアクションフックで、簡単に追加できますので、何かあった場合は、使ってみてください


コメントは受け付けていません。