【保存版】WordPressで@font-faceが表示されない！CORSエラーの原因と解決方法 |

Webサイトでオリジナルフォントを使おうと、@font-face を設定したのにブラウザで表示されない…。

DevTools（デベロッパーツール）の Networkタブ を確認すると「CORSエラー」と表示されていることはありませんか？

この記事では、同じような問題で悩む方に向けて、原因の特定方法と具体的な解決手順 をわかりやすく解説します。

【原因】CORSエラーとは？

CORS（Cross-Origin Resource Sharing）とは、異なるドメイン間でのリソース共有 に関するブラウザの制限です。

フォントはクロスオリジン扱いになるため、サーバー側で許可されていないと読み込めません。

例えば以下のような場合、CORSエラーが発生します。

ページURL：https://www.example.com/
フォントURL：https://example.com/fonts/font.woff → wwwの有無が違うだけでも別オリジン扱い

【確認方法】DevToolsでエラーをチェック

Chromeでページを開く
右クリック → 検証 → Networkタブ を開く
ページをリロードしてフォントを読み込み直す
Filter欄に woff と入力してフォントだけを表示
該当フォントをクリックし、Status と Consoleエラー を確認

CORS policy… と出ていれば、サーバーが外部からのアクセスを許可していません。

【解決方法1】相対パスに変更する（おすすめ）

WordPress子テーマ内にフォントを置いている場合、絶対URLではなく相対パスで指定 するとCORSが不要になります。

@font-face {
  font-family: 'corpmarugo';
  src: url("/wp-content/themes/the-thor-child/fonts/corpmarugo_2.woff2") format("woff2"),
       url("/wp-content/themes/the-thor-child/fonts/corpmarugo_2.woff") format("woff");
  font-display: swap;
}

これでページと同じオリジンからフォントを取得するため、CORSエラーは発生しません。

【解決方法2】サーバーでCORSを許可する

CDNやサブドメインからフォントを読み込む場合は、サーバー側でCORSを許可する必要があります。

1. .htaccess

に以下を追加

<FilesMatch "\.(woff|woff2|ttf|otf|eot)$">
  Header set Access-Control-Allow-Origin "*"
</FilesMatch>

セキュリティを考える場合は、* ではなく自分のドメインを指定します。

Header set Access-Control-Allow-Origin "https://www.example.com"

2. キャッシュをクリア

CORS設定後は**スーパーリロード（Shift＋リロード）**で確認しましょう。

【まとめ】

原因はCORS制限によるフォントブロック
最も簡単な解決策は相対パスへの変更
外部ドメインからの読み込みはサーバーでCORS許可

初心者はまず相対パスで試すのがおすすめです。

この対応だけで、多くの「フォントが反映されない問題」が解決します。

これで、あなたの@font-faceフォントも正しく表示されるはずです。

同じ悩みを抱えている方は、ぜひこの記事を参考に試してみてください。

(Visited 1 times, 1 visits today)