こんにちは。
いつもお世話になっております。
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
回答1件
あなたの回答
tips
プレビュー