ドメインを跨いだアクセスが CORS ポリシーによってブロックされる

外部サーバーに設置したWebフォントをはてなブログから読み込もうとしても反映されないので、ブラウザの開発コンソールを確認してみると

Access to font at 'https://アクセス先' from origin 'https://アクセス元' has been blocked by CORS policy: The 'Access-Control-Allow-Origin' header has a value 'https://アクセス元' that is not equal to the supplied origin.

とエラーになっていました。

原因

ドメインをまたぐアクセスは、クロスサイトスクリプティングなどを防ぐために、アクセス先で指示されていないとブロックするセキュリティ機能が働いているらしい、とざっくり理解しました。CORS ポリシーと呼ばれるらしいです。

解決方法

アクセス先のサーバー側で「ここからのリクエストにはちゃんと応答しますよ」と指示してあげればよいです。

.htaccess に

<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "https://アクセス元"
</IfModule>

を記載すると、正常に動作するようになりました。