Serving your static files through a content delivery network (CDN) is one of the many ways to speed up a website. At the moment, I use MaxCDN and it has been great. Integrating the service with WordPress isn’t difficult so far you use a caching plugin like W3 Total Cache or WP Super Cache. However, if you display icons on your site using FontAwesome, things break and icons appear as squares.
In the image above, the search icon beside the input field appears as a weird little box. I’ve been having this issue over the last few months. Strangely, this happens only on Google Chrome and Opera. Everything appears to be fine when I checked the website on Safari and Firefox. I ignored it for a while, but I had to find a way to fix it since most of my visitors use Google Chrome.
Checking the browser console, the error was described as:
Redirect from ‘<resource CDN URL>’ to ‘<resource website URL>’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘<website>’ is therefore not allowed access.
Why this is happening
According to MaxCDN:
When using Webfonts via @font-face or other CSS3 methods, some browsers like Firefox and IE will refuse to embed the font when it’s coming from a 3rd party URL because it’s a security risk.
Fixing this is quite easy and there are actually two ways to go about it.
Modifying MaxCDN’s settings to allow Cross-Origin Resource Sharing
This was all I did to get this issue fixed.
1. Log in to your MaxCDN account and select your pull zone.
2. Select the Settings tab.
3. Under Edge Settings, enable Add CORS Header and save.
4. Select the Manage Cache tab and Purge All Files.
5. If you use cache plugins like W3 Total Cache or WP Super Cache, be sure to purge everything. This also applies to Minify plugins like Fast velocity minify.
This should fix the problem and FontAwesome icons should start appearing normally.
If this isn’t working, you might try the second fix.
Editing your .htaccess file
If the fix above doesn’t work for your, log in to your hosting control panel and put these codes into the .htaccess file:
# ----------------------------------------------------------------------
# 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|woff2|font.css|css|js)$">
Header set Access-Control-Allow-Origin "*"
</FilesMatch>
</IfModule>
Not that the code above only works for Apache servers. If you’re running an IIS, Nginx or a different kind of server, check this page.