Fuentes de Dominio Cruzado CORS
La Fuente CSS No Se Carga

Las Fuentes no se Cargan en Documentos y Páginas

La mayoría de los navegadores web no permiten solicitudes entre dominios, esto se debe a la misma política de seguridad de origen. Esto significa que, a veces, el uso de fuentes web de otro dominio puede provocar errores y la fuente no se carga en el navegador o en los documentos de 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>

La Solución

Para corregir las restricciones de origen cruzado para sus fuentes, la respuesta del servidor remoto que aloja los archivos de fuentes debe incluir el encabezado Access-Control-Allow-Origin.

Si está utilizando servicios de fuentes como Typekit o Google Fonts, o tal vez redes de entrega de contenido como BootstrapCDN, CdnJS o JsDelivr para cargar sus fuentes preferidas, no necesita hacer nada, porque el encabezado Access-Control-Allow-Origin es ya enviado en su encabezado de respuesta.

Apache

Para configurar un servidor web Apache, introduzca el siguiente código en el archivo httpd.conf o .htaccess.

1. Agregue los encabezados de tipo mime en 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. Habilite el uso compartido de recursos de origen cruzado (CORS) en Apache para los tipos de mime:

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

NGINX

Para configurar un servidor web NGINX, coloque el siguiente código en /etc/nginx/nginx.conf o su archivo personalizado /etc/nginx/conf.d/custom.conf.

1. Agregue los encabezados de tipo mime en 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. Habilite el uso compartido de recursos de origen cruzado (CORS) en NGINX para los tipos de mime:

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

IIS

Para configurar Microsoft IIS, agregue el siguiente código al archivo web.config system.webServer.

• Habilitar el uso compartido de recursos de origen cruzado (CORS) en 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

Si no puede cambiar la configuración del servidor, siempre puede usar PHP para entregar el archivo de fuente.

• Utilice un archivo de secuencia de comandos del servidor en lugar de un archivo de fuente físico

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

• Cómo solucionar problemas entre dominios @ font-face con PHP

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