外部のフォントを読み込めない(クロスオリジン?)

Question

前提・実現したいこと

adobeのWEBフォント(adobeFONTS)をワードプレス(https://example.com)で読み込めない
cms=ワードプレス
cmsインストール先＝サブドメインの/testフォルダ

エラーメッセージsafari

Origin https://example.com is not allowed by Access-Control-Allow-Origin.

エラーメッセージchrome

Access to XMLHttpRequest at 'https://p.typekit.net/p.gif?●●●●●●●' from origin 'https://example.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

試したこと

ワードプレス のfunctions.htmlに「header("Access-Control-Allow-Origin: *");」と追記
ワードプレス のインストールディレクトリに下記.htaccessファイルをアップロード

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

上記のFilesMatchタグの開始と終了をとってもエラーが出ます。

Answer 1

質問内で例示でつかうドメイン名は「ご自身が所有する実際のドメイン名」か「例示用に用意されているドメイン名( example.com / example.net や example.jp や example.co.jp 等)」を使ってください。( 例示用ドメイン名については、https://www.atmarkit.co.jp/fwin2k/win2ktips/801exampledom/exampledom.html や https://jprs.jp/faq/use/等を参照してください。)

---

Access to XMLHttpRequest at 'https://p.typekit.net/p.gif?●●●●●●●' from origin 'https://example.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

CORS policy のエラーは、コンテンツ提供元がアクセスを禁止している際に発生しますので、

ワードプレス のfunctions.htmlに「header("Access-Control-Allow-Origin: *");」と追記

ワードプレス のインストールディレクトリに下記.htaccessファイルをアップロード

のように 利用している Web サイト側で設定しても意味がありません。

また、Adobe Fonts マニュアル > Web デザインと開発 > ドメイン に

Web プロジェクトのドメイン名のリストを指定する必要がなくなりました。埋め込みコードを任意の Web サイトまたは HTML 電子メールに追加するだけで、フォントを使用できるようになります

とあるように AdobeFonts は、使用するWebサイトの個々のドメイン登録は不要になったはずで、URL の登録画面もなくなっていたと思います。

CORS policy のエラーが発生する可能性としては、

• Adobe のサブスクリプションが無効になり、AdobeFonts が使えなくなった。
• 何らかの理由で、「埋め込みコード」が無効になってしまった。

ということはないでしょうか？

Adobe アカウントにログインして、再度「埋め込みコード」を取得して、Webサイトに記載している埋め込みコードを入れ替えるとどうなるでしょうか？

Comments

[kjshdfiuasye]

返信が遅くなり、誠に申し訳ありません。
例示でつかうドメイン名を変更いたしました。失礼いたしました。
コンテンツ提供元で発生しているエラーは、利用している Web サイト側での設定では対応できないのですね。勘違いしておりました。
「埋め込みコード」を取得→埋め込みを再度行いましたが結果は変わりませんでした。
adobeに問い合わせた結果をこの後載せます。

Answer 2

解決というより暫定的な対応です。
adobeに問い合わせたところ、
「Web プロジェクトを利用されている Web ページにて、フォントにアクセスする際にエラーが発生する事象が起きているとのことでした。そちらは弊社でも確認しているエラーでして、現在弊社にて本社に確認中でございましたので、改善までおまちいただけますようお願いいたします。」とのことで、私以外の人が作ったwebページでも起きている事象とのことです。
ワードプレス外のディレクトリにadobefontsを埋め込んだページをアップしアクセスするとエラーは起きませんでした。ワードプレスのリダイレクト機能が原因なのではないかと個人的には思っております。
そのためadobeの対応を待つか、ワードプレス外でadobefontsを利用するしかないようです。

Comments

[gvaslkjlie]

この回答ではワードプレスを導入したサブドメインより上の、最上ルートディレクトリで読み込んだことで、フォントが作動しました。ワードプレス外でも、サブドメインディレクトリのhtmlファイルでadobe fontsを読み込むとエラーになりましたので、ワードプレスは関係なさそうです。原因はワードプレスではなく、サブドメインの可能性が出てきました。