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 hostyou will have to add the following in your virtual host file:

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 :

Dans ce cas, les en-têtes nécessaires ne sont pas appliquées à la police, de sorte qu'elle n'apparaît toujours pas.
Vous devez alors trouver quelle feuille de style contient la référence à la police d’icône en utilisant les outils de développement de votre navigateur :

La solution est d’ajouter l’URL de cette feuille de style aux  Fichiers à exclure du CDN de l’onglet CDN :

Si vous avez activé la minification CSS, vous devrez aussi exclure cette feuille de style de la minification CSS :