【wordprss】ウェブフォントがデスクトップのみで表示されなくなりました

Question

前提・実現したいこと

ウェブフォント「design_plus」を使用している箇所の表示が「□」になってしまいました。フォントファイルへのリンクがどこかで切れているのだと思いますが、どこをどう修正したらいいのか、ご助力頂きたいです。

使っているテーマ：vogue_tcd051

発生している問題・エラーメッセージ

Access to Font at 'http://ドメイン.ne.jp/wp/wp-content/themes/vogue_tcd051/assets/fonts/design_plus.woff?v=1.0' from origin 'http://www.ドメイン.co.jp' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://www.ドメイン.co.jp' is therefore not allowed access.

□　←アイコンが□になってしまう

該当のソースコード

【HTML】
<button id="js-request__close" class="p-request__close"></button>

【CSS】
.p-request__close {
    background: #000;
    border: 0;
    color: #fff;
    width: 60px;
    height: 60px;
    position: absolute;
    top: 0;
    right: 0;
    padding: 0;
}

button, input, optgroup, select, textarea {
    font-family: sans-serif;
    font-size: 100%;
    line-height: 1.15;
    margin: 0;
}
.p-request__close::before {
    content: "\e91a";
    font-family: "design_plus";
}

試したこと

demoページのCSSのfont-family: "design_plus";をクロームの検証でチェックを外すとアイコンが『 □ 』になるのを確認。

@font-face {
font-family: "design_plus";
src: url('/wp/wp-content/themes/vogue_tcd051/assets/fonts/design_plus.woff?v=1.0') ;
}

.p-request__close{
font-family: "use-SourceHanSansJP";
}

.p-request__close::before {
    content: "\e91a";
    font-family: "design_plus";
}

上記コードで解決しました！

補足情報（FW/ツールのバージョンなど）

CSSがきいてない、というよりはリンクが切れているようで font-family: "design_plus";は読み込まれています。スマホやタブレットではウェブフォントが表示されます。
どうかご助力お願いいたします。

Answer 1

エラー内容として

Access to Font at 'http://ドメイン.ne.jp/wp/wp-content/themes/vogue_tcd051/assets/fonts/design_plus.woff?v=1.0' from origin 'http://www.ドメイン.co.jp' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://www.ドメイン.co.jp' is therefore not allowed access.

とありましたので、http://ドメイン.ne.jpで公開しているWEBフォントを異なるオリジンのhttp://www.ドメイン.co.jpから読み込んだコンテンツから参照したことによるセキュリティエラーです.

WEBフォントを公開しているhttp://ドメイン.ne.jp側のWEBサーバーの設定を, WEBフォントと共に適切なAccess-Control-Allow-Originヘッダーを返すように変更して下さい.

参考
https://developer.mozilla.org/ja/docs/Web/HTTP/HTTP_access_control

---

別解
WEBフォントをhttp://www.ドメイン.co.jpにも配置して、同一ドメインからフォントファイルをダウンロードするようにすればそもそもこのような現象は発生しません.

そのためには, @font-face規則の部分を自ドメインのフォントファイルを参照するようにスタイルシートの内容を書き換える必要があります.

参考
https://developer.mozilla.org/ja/docs/Web/CSS/@font-face

NOTE:
この方法ではリソースが分散することによって管理コストが増えてしまいます.

---

NOTE:以下は旧回答

参照しているCSSの内容からWEBフォントの利用を宣言する@font-face規則を記述している部分が抜けているのかもしれません.

CSSファイルやstyle要素の中身やlink要素の存在・参照先(メディア条件なども)を確認し、足りなければ再度WEBフォントを利用するための記述を追加しましょう.

Comments

[ami15821]

ご回答、ありがとうございます。
ご指摘いただいた、@font-face　と書かれている箇所を探しております。

もう少し、アドバイスを頂きたく、クロームで表示されていたエラーメッセージを記載させて頂きました。
よろしくお願いいたします！

[退会済みユーザー]

エラーはクロスドメインだから今のところはブラウザのセキュリティレベルの違いなきもする

[ami15821]

defghi1977様、asahina1979様、ご回答ありがとうございます。
defghi1977様、参考サイト拝見させて頂きましたが、私のような素人には幾分かハードルが高く、どこのファイルの記述なのか、わかり兼ねております...

サイトが表示されなくなるような自体にはしたくないのですが、エンジニアでない素人コーダーが触って良い範囲なのでしょうか...？

[defghi1977]

> サイトが表示されなくなるような自体にはしたくないのですが、エンジニアでない素人コーダーが触って良い範囲なのでしょうか...？
さわっちゃだめ！
サーバー管理者に現状を報告して、どうしたらベストかを議論して下さい.

[defghi1977]

それか、WEBフォントをhttp://www.ドメイン.co.jpにも配置して、同一ドメインからフォントファイルをダウンロードするようにすればそもそもこのような現象は発生しません.

[ami15821]

やはり触っちゃダメな範囲ですよね...

はい、defghi1977様がおっしゃるWEBフォントをhttp://www.ドメイン.co.jpにも配置して、同一ドメインからフォントファイルをダウンロードする、がもっとも安全で今回行いたかったことだと思います。

この方法を行いたいのですが、
WEBフォントファイルがおそらくFTPの階層の/www/wp/wp-includes/fonts　←こちらなんじゃないかと推測してます。

fontsフォルダの中身はdashicons.eot、dashicons.svg、dashicons.ttf、dashicons.woffと４つのファイルが入っています。

こちらがwebフォントという認識であっているでしょうか？
説明が長くて、申し訳ないです。

[defghi1977]

それでOKです(できれば@font-face規則で読み込んでいるフォントを特定できるのが一番なのですが). なおSVGフォントは今日サポートする環境がありませんので、省いても構いません.

[ami15821]

ご回答ありがとうございます。
無知なため、恥ずかしげもなく聞いてしまいますが
読み込んでいるフォントの特定、というのはfont-family: "design_plus";のことでしょうか？

[defghi1977]

WEBフォントとして
font-family: "design_plus";
を使っているのであれば必ずスタイルシート内に対応する
@font-face{
font-family: "design_plus";
src: url(xxx/xxx.woff);
}
と言った記述があるはずです.
https://developer.mozilla.org/ja/docs/Web/CSS/@font-face

[ami15821]

少しずつ、不明確な箇所が繋がってきました。
参考サイト、確認させて頂きました。
defghi1977様の上記の例からも推測して、エラー内容とも照らし合わせると
@font-face{
font-family: "design_plus";
src: url(http://ドメイン.ne.jp/wp/wp-content/themes/vogue_tcd051/assets/fonts/dashicons.woff);
}
上記のような記述がどこかのスタイルシートに記載する内容、ということでしょうか？

[defghi1977]

ないと先ほどのエラーは出ません. 従って必ずどこかで読み込んでいるはずなのです.
ああ、だとすればCSSを修正しないとエラーは収まりませんね...

[ami15821]

あのー、CSSの修正というのはどういった修正でしょうか...？

[defghi1977]

クロスドメインでフォントを読み込んでいた部分を自ドメインに書き換える必要があります.
http://ドメイン.ne.jp/wp/wp-content/themes/vogue_tcd051/assets/fonts/design_plus.woff?v=1.0
↓
http://www.ドメイン.ne.jp/wp/wp-content/themes/vogue_tcd051/assets/fonts/design_plus.woff?v=1.0
と

[ami15821]

自ドメインに書き換えを行うとなると
【HTML】
<button id="js-request__close" class="p-request__close"></button>
【CSS】
@font-face {
font-family: "design_plus";
src: url('http://www.ドメイン.ne.jp/wp/wp-content/themes/vogue_tcd051/assets/fonts/design_plus.woff?v=1.0') ;
}

.p-request__close{
font-family: "use-SourceHanSansJP";
}
こんな感じでしょうか？

[退会済みユーザー]

"/" 始まりじゃ?

[defghi1977]

> こんな感じでしょうか？
既存の@font-faceを探して書き換えるのですよ

> "/" 始まりじゃ?
確かに同一ドメインであれば相対指定の方が管理が楽になりまさいね

[ami15821]

defghi1977様　asahina1979様
ご回答ありがとうございます。

こういうことでしょうか？
@font-face {
font-family: "design_plus";
src: url('/wp/wp-content/themes/vogue_tcd051/assets/fonts/design_plus.woff?v=1.0') ;
}

[defghi1977]

まあ、あとはそれで動くかどうか試してみるがよろしかろうと

[ami15821]

ありがとうございます！

実行した後、ご報告させて頂きます。

[ami15821]

実行しました、ウェブフォント表示されるようになりました！

ありがとうございます！
表示されるようになったコードも記述しておきます。

defghi1977様　asahina1979様
ご回答ありがとうございます。