Cross Domain Fonts
Problème de chargement de la police CORS

Les polices ne se chargent pas dans les documents

La plupart des navigateurs Web n’autorisent pas les requêtes interdomaines, c’est à cause de la même politique de sécurité d’origine. Cela signifie que parfois, lors de l’utilisation de polices Web d’un autre domaine, des erreurs peuvent survenir et que la police ne se charge pas dans le navigateur ou dans les documents 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 Solution

Pour corriger les restrictions d’origine croisée pour vos polices, la réponse du serveur distant qui héberge les fichiers de polices doit inclure l’en-tête Access-Control-Allow-Origin.

Si vous utilisez des services de polices comme Typekit ou Google Fonts, ou peut-être des réseaux de diffusion de contenu comme BootstrapCDN, CdnJS ou JsDelivr pour charger vos polices préférées, vous n’avez rien à faire, car l’en-tête Access-Control-Allow-Origin est déjà envoyés dans leur en-tête de réponse.

Apache

Pour configurer un serveur Web Apache, placez le code suivant dans le fichier httpd.conf ou .htaccess.

1. Ajoutez les en-têtes de type mime sur 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. Activez le partage de ressources cross-origin (CORS) sur Apache pour les types mime:

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

NGINX

Pour configurer un serveur Web NGINX, placez le code suivant dans le fichier /etc/nginx/nginx.conf ou dans votre fichier /etc/nginx/conf.d/custom.conf personnalisé.

1. Ajoutez les en-têtes de type mime sur 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. Activez le partage de ressources cross-origin (CORS) sur NGINX pour les types mime:

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

IIS

Pour configurer Microsoft IIS, ajoutez le code suivant au fichier web.config system.webServer.

• Activer le partage de ressources cross-origin (CORS) sur 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 vous ne pouvez pas modifier les paramètres du serveur, vous pouvez toujours utiliser PHP pour fournir le fichier de police.

• Utilisez un fichier de script serveur plutôt qu’un fichier de police physique

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

• Comment résoudre les problèmes cross-domain @ font-face avec PHP

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