In some cases users experience Font Icons display error due to various reasons. We use font icon libraries to show different icons inside the theme. They are actually fonts that are created to be like icons. Browsers have some limitation on rendering fonts from domains other than your website domain due to security reasons, so in some cases they prevent them from loading.
Font Icons Display Error
This causes the font icons to not render correctly. An example of contact us and go to top button not rendering correctly:
Also there sometimes browsers like Internet Explorer or Firefox complain about not having Type of font declared on the server.
Solution:
To overcome this problem you need to add a code inside the HTACCESS file of your website on the Appache server. To fix the Cross Browser Origin Resource Sharing Policy issue which prevents browsers from loading the fonts from domains other the current website domain and to make sure that browsers such as Internet Explorer and Firefox does not complain about the Font Type not explicitly declared on your server you need to add the code below into your HTACCESS file:
# ----------------------------------------------------------------------
# CORS-enabled images (@crossorigin)
# ----------------------------------------------------------------------
# Send CORS headers if browsers request them; enabled by default for images.
# developer.mozilla.org/en/CORS_Enabled_Image
# blog.chromium.org/2011/07/using-cross-domain-images-in-webgl-and.html
# hacks.mozilla.org/2011/11/using-cors-to-load-webgl-textures-from-cross-domain-images/
# wiki.mozilla.org/Security/Reviews/crossoriginAttribute
# mod_headers, y u no match by Content-Type?!
<FilesMatch "\.(gif|png|jpe?g|svg|svgz|ico|webp)$">
SetEnvIf Origin ":" IS_CORS
Header set Access-Control-Allow-Origin "*" env=IS_CORS
# ----------------------------------------------------------------------
# Webfont access
# ----------------------------------------------------------------------
# Allow access from all domains for webfonts.
# Alternatively you could only whitelist your
# subdomains like "subdomain.example.com".
<FilesMatch "\.(ttf|ttc|otf|eot|woff|woff2|font.css|css|js)$">
Header set Access-Control-Allow-Origin "*"If you are not familiar with the HTACCESS file and do not know how to locate and edit the file you need to contact your hosting service provider and ask them to add the code above for you.
This will fix the Font Icons display error in all browsers.
