Résoudre des problèmes avec CDN et les polices (icônes)

Si vous utilisez une police d’icônes (par exemple Font Awesome) et un CDN, cela ne fonctionnera peut-être pas à cause de la limitation des requêtes de polices inter-domaines.

Solution

Vous devrez ajouter des entêtes spécifiques pour autoriser la cross domain origin.

Si vous utilisez votre propre CDN, copiez ceci dans votre fichier .htaccess :

# ----------------------------------------------------------------------
# CORS-enabled images (@crossorigin)
# ----------------------------------------------------------------------
# Send CORS headers if browsers request them; enabled by default for images.
# developer.mozilla.org/en/CORS_Enabled_Image
# blog.chromium.org/2011/07/using-cross-domain-images-in-webgl-and.html
# hacks.mozilla.org/2011/11/using-cors-to-load-webgl-textures-from-cross-domain-images/
# wiki.mozilla.org/Security/Reviews/crossoriginAttribute
<IfModule mod_setenvif.c>
  <IfModule mod_headers.c>
    # mod_headers, y u no match by Content-Type?!
    <FilesMatch "\.(gif|png|jpe?g|svg|svgz|ico|webp)$">
      SetEnvIf Origin ":" IS_CORS
      Header set Access-Control-Allow-Origin "*" env=IS_CORS
    </FilesMatch>
  </IfModule>
</IfModule>
# ----------------------------------------------------------------------
# Webfont access
# ----------------------------------------------------------------------
# Allow access from all domains for webfonts.
# Alternatively you could only whitelist your
# subdomains like "subdomain.example.com".
<IfModule mod_headers.c>
  <FilesMatch "\.(ttf|ttc|otf|eot|woff|font.css|css)$">
    Header set Access-Control-Allow-Origin "*"
  </FilesMatch>
</IfModule><br>

Si vous utilisez Nginx, copiez ce code dans votre fichier hôte virtuel :

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

Enfin, si vous utilisez MaxCDN, vous pouvez suivre ce lien.