Résoudre des problèmes avec CDN et les polices d' icônes
Dans cet article
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. Lorsque vous activez l’option CDN de WP Rocket, nous ajoutons automatiquement les règles nécessaires pour les CORS headers à votre htaccess file.
No Access-Control-Allow-Origin header
❌ Access to Font has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource
Si vous trouvez cette erreur dans la console de votre navigateur, cela signifie que les règles CORS ne sont pas correctement en place. WP Rocket les actives par défaut sur les sites qui utilise un fichier htaccess, mais si vous utilisez un serveur NGINX vous devrez ajouter le code suivant à votre fichier VirtualHost:
location ~* \.(eot|css|otf|ttf|woff)$ {
add_header Access-Control-Allow-Origin *;
}
Access-Control-Allow-Origin header contains multiple values
Dans certains cas, votre CDN ajoutera aussi les règles CORS. Cela donnera l’erreur dans la console de votre navigateur, ce qui empêchera le chargement de la police d’icônes :
❌ The 'Access-Control-Allow-Origin' header contains multiple values '*, *', but only one is allowed.
La solution est de désactiver un des deux ajouts de ces règles. Le plus facile étant habituellement de désactiver l’option d’ajout des headers CORS directement depuis les réglages de votre CDN.
Si vous préférez enlever les règles CORS ajoutées par WP Rocket, vous pouvez utiliser ce plugin :
📥 Télécharger (.zip): WP Rocket | No CORS for Fonts
Développeurs: Vous trouverez le code de ce plugin sur GitHub.
Police d’icônes dans votre feuille de style
Si vous avez vérifié ce qui précède et que vous rencontrez toujours un problème avec les icônes affichées, cela peut être dû au fait que parfois les webfonts sont appelées depuis une feuille de style comme ceci :
