Did you notice our new premium, WooCommerce theme? Check WeShop theme now!

Okay
  Print

Fonts not displayed correctly

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