Resolving issues with CDN and fonts (icons)

In this Article

If you are using a web or icon font (for example   Font Awesome) and a CDN, some rules are required to allow Cross Domain font requests. When you enable the CDN option in WP Rocket, we  automatically add the necessary rules for CORS headers to your 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

If you find this error in your browser console it means the correct CORS rules are not in place. WP Rocket enables them by default on sites that use an htaccess file, but if you use an NGINX server you 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

In some cases your CDN provider may also be adding the CORS rules. This may result in the following error in your browser console, which prevents your webfonts loading: 

The 'Access-Control-Allow-Origin' header contains multiple values '*, *', but only one is allowed.

The solution is to disable one set of the CORS rules. The easiest way is usually to disable the option to add a CORS header from your CDN provider's account management panel.

If you prefer to remove the CORS rules added by WP Rocket, you can use the following helper plugin.

📥 Download (.zip):  WP Rocket | No CORS for Fonts

Developers: You can find the code for this plugin on GitHub.

Webfonts within stylesheets

If you've checked the above and are still having an issue with icons showing up, it could be due to the fact that sometimes a webfont is called from within a stylesheet like this: 

In this case, the necessary headers are not being applied to the font, so it still doesn't show up. 
You can find out which stylesheet contains the reference to the font by using the developer tools in your browser: 

The solution is to add the stylesheet URL to the Rejected Files list on the CDN tab:

If you have enabled CSS minification, you will also have to exclude that stylesheet from minification.