質問: こんにちは。 いつもお世話になっております。 Wordpressで作ったブログにて、SNSボタンとしてicomoonで作ったフォントを使っていました。 ここ半年くらいは表示されていたと思いますが、本日見てみると豆腐化しておりました。おとうふ。 * chromeとFireFoxで豆腐化(念のため最新にしてます) * 従来はchromeとFireFoxでも正常表示されていました。 * IE11では従来通り今でも正常に表示されています。 作ったときに参考にさせていただいたのはこの記事です。 https://nelog.jp/svg-to-icon-font 過去に表示されていたことと、IEで表示されていることから、パス間違い等ではないと思うのですが...。 何か考えられる原因を教えていただければ、調べてみたいと思いますので、「ここを調べてみては?」という意見をいただければ幸いです。 宜しくお願いいたします。 --追記です maisumakun様のご指摘どおり、F12でのコンソール確認の結果、Chromeでは「Failed to load resource: the server responded with a status of 403 ()」と出ており、woffファイルとttfファイルを読み込めない状態であるということはわかりました。 FireFoxではエラーメッセージは出ておりませんが、おそらく同等の現象だと思われます。 IEで表示されるのは参照するファイルが違うためなのかな、とも思っております。 いろいろ試してみましたが、いまいち解決策が見つかっておりません。 何かよい案がありましたら、引き続き教えていただければ幸いです。 宜しくお願いいたします。 --さらに追記です いろいろ試してみました。 icomoonのヘッダーに記述してある参照URLが以下になってます。 https://もにょもにょ.com/wp-content/themes/テーマ名/fonts/icomoon.woff?-qz7pb2 これを直打ちしてみても403エラーとなりました。 そこで末尾の「?-qz7pb2 」を削除した https://もにょもにょ.com/wp-content/themes/テーマ名/fonts/icomoon.woff これを直打ちしてみたところ、正常にアクセス(ダウンロード)できました。 この語尾の「?-qz7pb2」が原因であることはわかったんですが、消していいものかどうか。 詳しいかた、教えていただければ幸いです。 ### 回答編 嘘です。回答ではないです。 原因はわかりませんが、対処療法としてです。 回答で教えていただいた方法で対応させていただきました。 該当のフォントに * woff * ttf * svg * eot とあり、その中でwoffとttfへのリンクの末尾の文字列を削除しました。 そうするとChromeもFireFoxも無事に元通り表示されるようになりました。 今まで出ていたものが、なんで急に消えてしまったのか等は全くわかっておりませんが、この方法で悪影響はIE8以前に対応できなくなる、ということのみかな、と伺った内容から判断しておりますので、とりあえずこの修正を採用しようと思います。 現象がなくなればよい。のではあるのですが、やっぱり気持ち悪さは残りますので、もし原因思いつくことがありましたら、何らかの方法で教えていただければと思います。 ご協力いただいた皆様、ありがとうございましたm(_ _)m
回答: 「IEで見える」ということから1つ考えられる可能性として、アイコンフォントを別なドメインにおいてある場合に必要なCORSの設定をしていない、ということが考えられます。 `Access-Control-Allow-Origin:`を正しく返すようにしておかないと、ChromeやFirefoxではフォントを認識しなくなります。 (追記) woffに`?****`のようなクエリが付けてあるのは、IE 8以下で発生するバグの対策である可能性があります(StackOverflow)。IE 9以上のみサポートするのであれば、おそらく不要です。