質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

Q&A

解決済

1回答

2389閲覧

icomoonのフォントが文字化けする

退会済みユーザー

退会済みユーザー

総合スコア0

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

1グッド

1クリップ

投稿2017/11/18 08:56

編集2017/11/19 14:09

こんにちは。
いつもお世話になっております。

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

kei344👍を押しています

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

maisumakun

2017/11/18 09:10

コンソールにエラーは出ていますか?
退会済みユーザー

退会済みユーザー

2017/11/18 09:20

コンソールというとサーチコンソールのことでしょうか?エラーは出ておりません。
maisumakun

2017/11/18 09:36

F12などで出てくるブラウザのコンソールの方です。
退会済みユーザー

退会済みユーザー

2017/11/18 11:14

ありがとうございます。そちらもエラーはなかったです。
退会済みユーザー

退会済みユーザー

2017/11/18 11:15

いえ、嘘です。エラーありました。Failed to load resource: the server responded with a status of 403 ()となってます。
guest

回答1

0

ベストアンサー

「IEで見える」ということから1つ考えられる可能性として、アイコンフォントを別なドメインにおいてある場合に必要なCORSの設定をしていない、ということが考えられます。

Access-Control-Allow-Origin:を正しく返すようにしておかないと、ChromeやFirefoxではフォントを認識しなくなります。


(追記)

woffに?****のようなクエリが付けてあるのは、IE 8以下で発生するバグの対策である可能性があります(StackOverflow)。IE 9以上のみサポートするのであれば、おそらく不要です。

投稿2017/11/18 12:46

編集2017/11/19 13:19
maisumakun

総合スコア145183

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2017/11/18 13:24

ありがとうございます。 同一ドメインにおいてはありますが、IEでのみ見えるという現象は一致しますので、調べてみますね!
退会済みユーザー

退会済みユーザー

2017/11/19 14:00

追記に対して。 ありがとうございます。一度消して試してみます!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問