ドメイン移管した際にWordPressテーマ「cocoon」でアイコンフォントがFontAwesome も IcoMoonも表示されず□になってしまいました。
それもiOSでは表示されるのになぜかWindowsだけ表示されない。
どうしたものかと思っていましたが、解決したので対処法を記しておきます。
よくある原因は「cocoon FontAwesome 表示されない」で検索したらいくつも出てくるので、そちらも参考にしていただきつつ、今回はちょっと違うパターンでした。
結果から言うとクロスドメインが原因でした。。
まず前提条件です。
Check
- 移管前はアイコンも表示されていた
- 移管する際、「WordPress アドレス」と「サイトアドレス」を別にした
原因は「WordPress アドレス」と「サイトアドレス」を別にしたところでした。
「WordPress アドレス」は実際にWP本体を置いている場所で、「サイトアドレス」はトップページのURLです。
今回は訳あって「サイトアドレス」をルートドメイン。「WordPress アドレス」をサブドメインに設定していました。
cocoonは、アイコンの読み込みはCDNではなく、ファイルを親テーマ内に置いているのですが、
今回はテーマを置いてるのがサブドメイン。参照元がルートドメインの関係になっており、そこでフォントファイルが参照不能になっていました。
参照先（WordPress アドレスに設定したサブドメイン）のhtaccessにCORSを許可するように下記コードを追記したら無事表示されるようになりました。
<IfModule mod_headers.c>
<FilesMatch "\.(ttf|otf|eot|woff)$">
Header set Access-Control-Allow-Origin "https://〇〇〇.com"
</FilesMatch>
</IfModule>下記参考にさせていただきました。
