corsに関するエラー　ウェブフォントが読み込めません。

前提・実現したいこと

ワードプレスサイトの改修をしていたときのことです。
corsというセキュリティ規則に関するエラーで、ウェブフォントが読み込めません。
エラーを解消してウェブフォントが読み込まれるようにしたいです。

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

Access to font at 'https://www.artiste-village.com/wp-content/themes/artist_wp/font/Signerica_Medium.ttf' from origin 'http://www.artiste-village.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

コンソールに上記のようなエラーが出ていて、ウェブフォントがブロックされています。

該当のソースコード

css
1@font-face {
2    font-family: 'signerica';
3    src: url('../font/Signerica_Medium.ttf') format('truetype');
4  }

cssには上記のように記述してフォントを読み込もうとしています。
style.cssの一階層戻ったところにfontフォルダがあってそこの中にあるフォントファイルがあります。それをstyle.cssで読み込もうとしています。

試したこと

相対パスではなく、絶対パスで記述してみましたが、ダメでした。

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

調べてみると、corsというのは違うドメインからのソースの取得を禁じてる規約みたいで、今回のエラーもそれをブロックしたみたいなのです。
しかし、普通に同じテーマフォルダ内での相対パスで読み込もうとしているだけなので、同ドメイン内じゃないのか、と思うのです。

どうやったらエラー解消できるかわかる方いらっしゃったら教えてください。よろしくお願いいたします。

行動規範の内容に同意します

回答1件

ベストアンサー

同じサーバーであっても、httpとhttpsをまたがると別オリジンになるので、httpsに統一すればこのエラーは出なくなると思います。おそらく「当該箇所」とは別の箇所に問題があるのではないですか?

投稿2021/03/16 06:04

ockeghem

総合スコア11701

shunsaku87

2021/03/16 06:08

お忙しいところ回答本当にありがとうございます。確かにコンソールエラーの内容で、from originの方はhttpになっているのに、呼び出しはhttpsになっています。ここがエラーの原因でしょうか。となると、これはワードプレスサイトなんですが、どこを触ればhttpsかhttpかを切り替えられるというか、変更できるのでしょうか。すみません、オリジンというはどこを触ればいいかさっぱりわからないので、教えていただけないでしょうか。よろしくお願いいたします。