クロスドメインフォントCORS
CSS font-faceが読み込まれない

フォントがドキュメントに読み込まれない

ほとんどのWebブラウザーはクロスドメイン要求を許可しません。これは、同じ発信元のセキュリティポリシーが原因です。つまり、別のドメインのウェブフォントを使用すると、エラーが発生し、ブラウザやHireHopドキュメントでフォントが読み込まれないことがあります。

<style type="text/css">
@font-face {
    font-family: 'OpenSans';
    src: url('https://my_server.com/fonts/OpenSans.woff2') format('woff2');
}
html, body{
    font: normal 16px OpenSans, sans-serif;
}
</style>

ソリューション

フォントのクロスオリジン制限を修正するには、フォントファイルをホストするリモートサーバーからの応答に、Access-Control-Allow-Originヘッダーを含める必要があります。

TypekitやGoogle Fontsなどのフォントサービス、またはBootstrapCDN、CdnJS、JsDelivrなどのコンテンツ配信ネットワークを使用して好みのフォントを読み込む場合、Access-Control-Allow-Originヘッダーは何もしないので、何もする必要はありません。すでに応答ヘッダーで送信されています。

Apache

Apacheウェブサーバーを設定するには、次のコードを httpd.confまたは.htaccessファイルに挿入します。

1. ApacheにMIMEタイプのヘッダーを追加します。

   AddType application/vnd.ms-fontobject    .eot
   AddType application/x-font-opentype      .otf
   AddType image/svg+xml                    .svg
   AddType application/x-font-ttf           .ttf
   AddType application/font-woff            .woff
   AddType application/font-woff2           .woff2
   

2. MIMEタイプのApacheでクロスオリジンリソースシェアリング（CORS）を有効にします。

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

NGINX

NGINXウェブサーバーを設定するには、次のコードを/etc/nginx/nginx.confまたはカスタムの/etc/nginx/conf.d/custom.confファイルに配置します。

1. NGINXにMIMEタイプのヘッダーを追加します。

   application/vnd.ms-fontobject    eot;
   application/x-font-opentype      otf;
   image/svg+xml                    svg;
   application/x-font-ttf           ttf;
   application/font-woff            woff;
   application/font-woff2           woff2;
   

2. MIMEタイプのNGINXでクロスオリジンリソースシェアリング（CORS）を有効にします。

   location ~* .(eot|otf|svg|ttf|woff|woff2)$ {
       add_header Access-Control-Allow-Origin *;
   }
   

IIS

Microsoft IISを設定するには、次のコードを web.config system.webServerブロックに追加します。

• IISでクロスオリジンリソースシェアリング（CORS）を有効にする

  <system.webServer>
    <httpProtocol>
      <customHeaders>
        <add name="access-control-allow-origin" value="*" />
        <add name="access-control-allow-headers" value="content-type" />
      </customHeaders>
    </httpProtocol>
  </system.webServer>
  

PHP

サーバー設定を変更できない場合は、いつでもPHPを使用してフォントファイルを配信できます。

• 物理フォントファイルではなくサーバースクリプトファイルを使用する

  <style type="text/css">
  @font-face {
      font-family: 'OpenSans';
      src: url('https://my_server.com/fonts/OpenSans.php') format('woff2');
  }
  html, body{
      font: normal 16px OpenSans, sans-serif;
  }
  </style>
  

• PHPでクロスドメインの@ font-faceの問題を修正する方法

  <?php
  // fonts.php
  header('Access-Control-Allow-Origin: *');
  header('Content-Type: application/font-woff2');
  echo @file_get_contents('/fonts/OpenSans.woff2');
  ?>