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:
Header set Access-Control-Allow-Origin “*”
Also make sure mod_headers in Apache is enabled.
Here is how to check it:
- Open the file
"your apache folder"/conf
- Find the following line using CTRL+f in your text editor:
#LoadModule headers_module modules/mod_headers.so
- Remove the
- Save and restart your Apache.
That’s it. Fonts should load normally now.