So after migrating a live site to localhost to test some new design layouts, the custom fonts were not working.

I checked and the path to the font and css was ok, fonts were loaded correctly (relatively) and in the right folder.

So I went in the FF debugger and found that font had this error message next to them:

CORS header 'Access-Control-Allow-Origin' missing

Here is the reference page on Mozilla.

The solution is simple.

Ad .htaccess file in the directory of your site and there put this in the beginning:

<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin “*”
</IfModule>

Also make sure mod_headers in Apache is enabled.

Here is how to check it:

1. Open the file httpd.conf at "your apache folder"/conf
2. Find the following line using CTRL+f in your text editor: #LoadModule headers_module modules/mod_headers.so
3. Remove the #
4. Save and restart your Apache.

That’s it. Fonts should load normally now.