If you serve fonts files from different domains, fonts might not displayed correctly due to Cross-origin resource sharing (CORS). More info about CORS here: https://en.wikipedia.org/wiki/Cross-origin_resource_sharing
Chrome, Firefox and newer versions of Internet Explorer enforce the Cross-Origin Resource Sharing standard, and thus only render web fonts served with the appropriate “Access-Control-Allow-Origin” response header.
For example if you have more than one domain/sub-domain to show your site, fonts might not be displayed correctly in your other domains/sub-domains. This might affect Font Icons like Awesome Fonts or custom fonts hosted from your server.
Use-case:
http://www.sampledomain.com ( fonts shown correctly )
http://subdomain.sampledomain.com ( fonts not shown correctly )
To solve this issue you need to set the appropriate “Access-Control-Allow-Origin” response header.
You can modify your .htaccess file to allow fonts from another domain.
<FilesMatch "\.(ttf|otf|eot|woff|woff2)$"> <IfModule mod_headers.c> Header set Access-Control-Allow-Origin "http://subdomain.sampledomain.com" </IfModule> </FilesMatch>
or allow fonts from all domains ( in case you have more than one domain that is mapped to your site )
<FilesMatch "\.(ttf|otf|eot|woff|woff2)$"> <IfModule mod_headers.c> Header set Access-Control-Allow-Origin "*" </IfModule> </FilesMatch>
Depending on the server similar code must be configured ( e.g: for IIS7 or nginx )
More info here: http://enable-cors.org/server.html