teratail header banner
teratail header banner
質問するログイン新規登録

回答編集履歴

4

注意点についての記述を追加

2018/04/02 12:51

投稿

defghi1977
defghi1977

スコア4756

answer CHANGED
@@ -8,9 +8,19 @@
8
8
  参考
9
9
  [https://developer.mozilla.org/ja/docs/Web/HTTP/HTTP_access_control](https://developer.mozilla.org/ja/docs/Web/HTTP/HTTP_access_control)
10
10
 
11
+ ---
12
+
11
13
  別解
12
14
  WEBフォントを`http://www.ドメイン.co.jp`にも配置して、同一ドメインからフォントファイルをダウンロードするようにすればそもそもこのような現象は発生しません.
13
15
 
16
+ そのためには, @font-face規則の部分を自ドメインのフォントファイルを参照するようにスタイルシートの内容を書き換える必要があります.
17
+
18
+ 参考
19
+ [https://developer.mozilla.org/ja/docs/Web/CSS/@font-face](https://developer.mozilla.org/ja/docs/Web/CSS/@font-face)
20
+
21
+ NOTE:
22
+ この方法ではリソースが分散することによって管理コストが増えてしまいます.
23
+
14
24
  ---
15
25
 
16
26
  NOTE:以下は旧回答

3

回答に別解を追加

2018/04/02 12:51

投稿

defghi1977
defghi1977

スコア4756

answer CHANGED
@@ -8,6 +8,9 @@
8
8
  参考
9
9
  [https://developer.mozilla.org/ja/docs/Web/HTTP/HTTP_access_control](https://developer.mozilla.org/ja/docs/Web/HTTP/HTTP_access_control)
10
10
 
11
+ 別解
12
+ WEBフォントを`http://www.ドメイン.co.jp`にも配置して、同一ドメインからフォントファイルをダウンロードするようにすればそもそもこのような現象は発生しません.
13
+
11
14
  ---
12
15
 
13
16
  NOTE:以下は旧回答

2

誤字修正

2018/04/02 12:18

投稿

defghi1977
defghi1977

スコア4756

answer CHANGED
@@ -3,7 +3,7 @@
3
3
 
4
4
  とありましたので、`http://ドメイン.ne.jp`で公開しているWEBフォントを異なるオリジンの`http://www.ドメイン.co.jp`から読み込んだコンテンツから参照したことによる**セキュリティエラー**です.
5
5
 
6
- WEBフォントを公開している`http://ドメイン.ne.jp`側のWEBサーバーの設定を, WEBフォントと共に適`Access-Control-Allow-Origin`ヘッダーを返すように変更して下さい.
6
+ WEBフォントを公開している`http://ドメイン.ne.jp`側のWEBサーバーの設定を, WEBフォントと共に適切な`Access-Control-Allow-Origin`ヘッダーを返すように変更して下さい.
7
7
 
8
8
  参考
9
9
  [https://developer.mozilla.org/ja/docs/Web/HTTP/HTTP_access_control](https://developer.mozilla.org/ja/docs/Web/HTTP/HTTP_access_control)

1

回答の内容をエラーの内容に対応するものに変更

2018/04/02 11:22

投稿

defghi1977
defghi1977

スコア4756

answer CHANGED
@@ -1,3 +1,17 @@
1
+ エラー内容として
2
+ > 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.
3
+
4
+ とありましたので、`http://ドメイン.ne.jp`で公開しているWEBフォントを異なるオリジンの`http://www.ドメイン.co.jp`から読み込んだコンテンツから参照したことによる**セキュリティエラー**です.
5
+
6
+ WEBフォントを公開している`http://ドメイン.ne.jp`側のWEBサーバーの設定を, WEBフォントと共に適宜`Access-Control-Allow-Origin`ヘッダーを返すように変更して下さい.
7
+
8
+ 参考
9
+ [https://developer.mozilla.org/ja/docs/Web/HTTP/HTTP_access_control](https://developer.mozilla.org/ja/docs/Web/HTTP/HTTP_access_control)
10
+
11
+ ---
12
+
13
+ NOTE:以下は旧回答
14
+
1
15
  参照しているCSSの内容からWEBフォントの利用を宣言する`@font-face`規則を記述している部分が抜けているのかもしれません.
2
16
 
3
17
  CSSファイルや`style`要素の中身や`link`要素の存在・参照先(メディア条件なども)を確認し、足りなければ再度WEBフォントを利用するための記述を追加しましょう.