Recently, I’ve moved a site for my client from mediatemple to Amazon EC2. The client also wanted to use CloudFront as CDN. Everything worked out great. The site was super fast and the client is was very happy. However, there is one little thing:

If you’ve seen this error before, you’ll understand what it is. It’s a icon font error. Instead of showing the search icon, my client’s site showing that. It didn’t affect the site’s performance but I’m sure no site owner wants that error on her site. It makes the site look broken and unattractive to visitors.

What is the problem?

The problem is very simple. Previously, the icon font files were on the website’s server. The website and the font files were served by one domain so everything worked fine. However, when we used the CDN, the font files are served from the CDN’s domain so the website and the font files are served by two domain.

And, there is a setting needs to be enabled for this kind of setup to work. It is called Cross-Origin Resources Sharing. You can read a very thorough article about it here.

How to fix this error?

The fix is very simple. That’s to enable CORS. We are going to insert these line of text in  your .htaccess file under your domain’s folder.

<FilesMatch ".(eot|ttf|otf|woff)">
  Header set Access-Control-Allow-Origin "*"
</FilesMatch>

You may or may not need to restart apache. It depends on your server’s settings. Since an apache restart is cheap, you’ll do it anyway.

After that, your font icons should appear correctly.