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

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

ただいまの
回答率

90.52%

  • WordPress

    7200questions

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

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

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 546

ann

score 4

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

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

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • maisumakun

    2017/11/18 18:36

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

    キャンセル

  • ann

    2017/11/18 20:14

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

    キャンセル

  • ann

    2017/11/18 20:15

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

    キャンセル

回答 1

checkベストアンサー

+2

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

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


(追記)

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

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/11/18 22:24

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

    キャンセル

  • 2017/11/19 23:00

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

    キャンセル

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

  • ただいまの回答率 90.52%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

  • 解決済

    html: dropdownの設置方法

    よろしくお願いいたします。 現在、ドロップダウンリストを制作しておりますが、 上手く行きませんので、アドバイスをお願いいたします。 htmlには次のように表示しています。これは

  • 解決済

    WEB FONT について

    無料テーマ Piccolo  を使用しているのですが... この CONTACT 部分に WEB FONT が使われています。 どこのものなのか教えていただければ幸いで

  • 解決済

    icomoonのfontファイルの指定について

    icomoonにてアイコンを選んで、フォントをダウンロードしました。 style.cssは下記のようになっていたのですが、 fontファイルの指定で、'fonts/icomoo

  • 受付中

    WordpressでのGlyphiconの文字化け

    前提・実現したいこと ここに質問したいことを詳細に書いてください 現在、Wordpressでサイトを作っています。 もともとWordPressで現行のサイトがあり、wp 

  • 解決済

    cakePHP+bootstrapのカルーセル時にボタンが潰れる現象

    bootstrap単体時は問題ないですが、 cakePHPから出力した際に左右のページ送りボタンが潰れてしまいます。 ボタンだけが潰れていて、ページ送りの動きは問題ないです

  • 受付中

    webフォントのローカルでの反映方法が分かりません。

    前提・実現したいこと webフォントをローカルで反映させたいです。 発生している問題・エラーメッセージ ローカルで、webフォントがIE・chrome・opera・fir

  • 解決済

    ページ全体のフォントを指定したい

    webフォント? について質問です。 ページ全体のフォントを変えたいと思っています。 私のローカルに入っているフォントを、 サイトをみた誰でもそのフォントで表示されるよう

  • 解決済

    IEにてホームページを閲覧時、CSSのローカルフォントが適用されない。

    前提 現在ホームページを制作しています。 その中でCSSの@font-faceを用いて、ローカルに保存してあるフォント(はんなり明朝体)を使おうと思っていたのですが、IEのみうまく

同じタグがついた質問を見る

  • WordPress

    7200questions

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