>Problem When Using CDN in Magento: Cannot Loading Font Files

Problem When Using CDN in Magento: Cannot Loading Font Files

Content Delivery Network or Content Distribution Network (CDN) is a large distributed system of servers that deliver Internet content to end-users such as web content, downloadable objects, applications, media, and social networks. CDN distributes these data based on the geographic locations of users. CDN will store static files such as JavaScript, CSS or images to one or more servers so that user requests can be served by the nearest server instead all users request to one primary server.

Therefore, the primary goal of CDN is to serve content to end-users with high availability and high performance because it avoids system overloading, reduces bandwidth costs and improves page load time.

For Magento, CDN also brings a lot of benefits for Magento sites. However, there is a problem that we need to do more to overcome it. This is Magento sites cannot load font files when using CDN

You can see an example as below:

alt="magento-cannot-load-font-files"

So what is the reason for not loading font files of Magento sites when using CDN? In the process of working with Magento, we find that Magento sites can not load font files is because browsers block resources coming from domains that are different from the domain of the current site. Browsers block these resources by CORS (Cross-Origin Resource Sharing) Policy. (CORS is a mechanism that allows restricted resources (e.g., fonts) on a web page to be requested from another domain outside the domain from which the resource originated – Wikipedia)

Therefore, to overcome this problem, we have to enable CORS with our domains by inserting the below code snippet to the .htaccess file:

alt="enable-cors-in-magento"

We will list our domains for notifying to browsers that our domains allows loading resources from other outside domains. After adding this code snippet, Magento sites can load font files as normal way.

(For more understanding about Content Delivery Network, check out the following blog post with a lot of detailed information:

Content Delivery Network (CDN)- How to Find the Best CDN Service for Your Website)

If you find our blog post useful, please Like, Share or Subscribe for more Magento knowledge.

In case you have further issues about this topic, please Contact us to get a more detailed explanation. We are certified developers about Web development and Magento extension and always willing to help you to get more understanding about Magento issues.