Cross Domain Fonts CORS
Fonte CSS não carregando

As Fontes não Narregam nos Documentos

A maioria dos navegadores da web não permite solicitações de domínio cruzado, isso é devido à mesma política de segurança de origem. Isso significa que, às vezes, ao usar fontes da web de outro domínio pode causar erros e a fonte não carrega no navegador ou em documentos 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>

A Solução

Para corrigir as restrições de origem cruzada para suas fontes, a resposta do servidor remoto que hospeda os arquivos de fonte deve incluir o cabeçalho Access-Control-Allow-Origin.

Se você estiver usando serviços de fontes como Typekit ou Google Fonts, ou talvez redes de distribuição de conteúdo como BootstrapCDN, CdnJS ou JsDelivr para carregar suas fontes preferidas, você não precisa fazer nada, porque o cabeçalho Access-Control-Allow-Origin é já enviado em seu cabeçalho de resposta.

Apache

Para configurar um servidor da web Apache, coloque o seguinte código no arquivo httpd.conf ou .htaccess.

1. Adicione os cabeçalhos de tipo MIME no Apache:

   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. Ative o compartilhamento de recursos de origem cruzada (CORS) no Apache para os tipos MIME:

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

NGINX

Para configurar um servidor da web NGINX, coloque o seguinte código em /etc/nginx/nginx.conf ou em seu arquivo /etc/nginx/conf.d/custom.conf personalizado.

1. Adicione os cabeçalhos de tipo MIME no NGINX:

   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. Ative o compartilhamento de recursos de origem cruzada (CORS) no NGINX para os tipos MIME:

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

IIS

Para configurar o Microsoft IIS, adicione o seguinte código ao arquivo web.config system.webServer.

• Habilitar compartilhamento de recursos de origem cruzada (CORS) no IIS

  <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

Se você não pode alterar as configurações do servidor, você sempre pode usar o PHP para entregar o arquivo de fonte.

• Use um arquivo de script de servidor em vez de um arquivo de fonte física

  <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>
  

• Como corrigir problemas de cross-domain @font-face com PHP

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