Resolving issues with CDN and fonts (icons)

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.

In this Article

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

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

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 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 URI to the Exclude files from CDN text field on the CDN tab:

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.