Introduction
By default web fonts will not display correctly when a store is switched over to use our Ecommerce CDN. This is due to browsers like Firefox and Chrome rejecting requests for cross-domain resources (click here to learn more). You may find that these errors are not restricted to web fonts and affect other elements of your site too but the following guidelines can be used to resolve issues for other file types too.
This guide assumes that you have already purchased the Ecommerce CDN package and configured your store to work with your CDN.
Cross-origin Resource Sharing (CORS) errors occur when your store attempts to load elements from an external domain name that isn’t its own. The way to resolve this is to add 2 separate code blocks into your domain’s .htaccess file.
Before making any changes to your store, you should consider which folder you are using as your document root. By default, httpdocs is the web root directory, but it’s not uncommon for stores to use a different directory. Usually this is to improve security by locking a Magento 2 store to use pub as the root directory, as per our guide here.
If you’re unsure you can discover which folder you’re using as the site’s document root, you can always check in Hosting Settings within the Plesk Control panel:
Alternatively you can always contact our Hosting Support team for advice.In order to resolve the CORS errors when using the e-commerce CDN, you should add the following code block to the top of your .htaccess file:
<FilesMatch "\.(appcache|atom|bbaw|bmp|crx|css|cur|eot|f4[abpv]|flv|geojson|gif|htc|ico|jpe?g|js|json(ld)?|m4[av]|manifest|map|mp4|oex|og[agv]|opus|otf|pdf|png|rdf|rss|safariextz|svgz?|swf|topojson|tt[cf]|txt|vcard|vcf|vtt|webapp|web[mp]|webmanifest|woff2?|xloc|xml|xpi)$">
Header unset X-UA-Compatible
Header set Access-Control-Allow-Origin "https://www.your-store.co.uk"
</FilesMatch>Please note that you should update “https://www.your-store.co.uk” to your domain’s base URL. This should match your store’s home page URL exactly, including whether it includes the “www.” prefix or not, as well as matching the http or https. (Although if you’re running an online store and not using https, you should visit our guide on installing a free Let’s Encrypt SSL here).
There’s a second code block you need to add now, but your store’s document root will define where you need to add it. If your site uses the default httpdocs directory as the root, then you should add the following again to the same .htaccess file in httpdocs:
Header set Access-Control-Allow-Origin "https://www.your-store.co.uk"
Header set Access-Control-Allow-Origin %{AccessControlAllowOrigin}e env=AccessControlAllowOrigin
Header set Access-Control-Allow-Headers "Origin, X-Requested-With, Content-Type, Accept, X-CSRF-Token, X-XSRF-TOKEN"
Header set Access-Control-Allow-Methods "GET, POST, PUT, DELETE, OPTIONS"
Header set Access-Control-Allow-Credentials trueOtherwise you should add the code to the .htaccess file in your specific web root directory. So in the above example, I would add the code to the .htaccess file inside the httpdocs/shop/pub directory. Again, you should update https://www.your-store.co.uk so that it matches your store’s home URL exactly.
Once you’ve saved the file, you should see your web fonts displaying correctly on your store.
You may need to purge application level caches before you see the changes on the front-end. It is also worth purging your CDN from within your Billing panel too. You may find that purging individual site resources by specifying the path to them is sufficient, instead of purging all content stored on the CDN.