icoMoon fonts doesn't show-up on Firefox - firefox

Question

Haven't some issues with the cross-browsers with the icon replacement fonts on Firefox, currently only show-up the content text but not the icomoon text replacement. Source code shown from code Sass + Magento + .htaccess, any idea or help would be much appreciated.
Website:
http://www.phoebessecret.co.nz
Had done .htaccess rewrite:
AddType image/svg+xml svg svgz
AddEncoding gzip svgz
AddType application/vnd.ms-fontobject eot
AddType font/truetype ttf
AddType font/opentype otf
AddType application/x-font-woff woff
<FilesMatch ".(ttf|otf|eot|woff)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
Header set Access-Control-Allow-Origin "http://www.phoebessecret.co.nz"
Header set Access-Control-Allow-Origin "http://skin.phoebessecret.co.nz"
Header set Access-Control-Allow-Origin "http://js.phoebessecret.co.nz"
Header set Access-Control-Allow-Origin "http://media.phoebessecret.co.nz"
</IfModule>
</FilesMatch>
CSS:
#font-face {
font-family: 'topshops';
src:url('../fonts/topshops.eot');
src:url('../fonts/topshops.eot?#iefix') format('embedded-opentype'),
url('../fonts/topshops.svg#topshops') format('svg'),
url('../fonts/topshops.woff') format('woff'),
url('../fonts/topshops.ttf') format('truetype');
font-weight: normal;
font-style: normal;}
.icon-fonts {
font-family: 'topshops';
font-style: normal;
speak: none;
-webkit-font-smoothing: antialiased;
font-smoothing: antialiased;
text-rendering: optimizeLegibility;
font-weight: 400;
}
.iconsearch {
content: "\61";
}

Answer 1

Try to add this to your .htaccess file.
It should fix your issue. It fixed mine.
<FilesMatch ".(ttf|otf|eot|woff)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>
</FilesMatch>

Answer 2

I was having issues with icomoon and Firefox as well. Have you tried Paul Irish's 'bulletproof' #font-face syntax? It's a little different than what icomoon outputs and I've had better luck with it - no FF issues since.
#font-face {
font-family: 'Graublau Web';
src: url('GraublauWeb.eot?') format('eot'), url('GraublauWeb.woff') format('woff'), url('GraublauWeb.ttf') format('truetype');
}

Answer 3

I had the same problem (with a Wordpress installation), icomoon icons were not showing in Firefox. Chrome, Safari, IE worked fine.
After the Site was up and running, the client asked me to include www to the url, instead of just http://. So I changed the blog Adress, but not the Wordpress Adress (in the Wordpress Dashboard). Suddenly all Icomoon Icons were gone. After adding www to the Wordpress address, the icons were back.

Answer 4

There are two things you may try. I used both and it worked for me.
Use full links in in your CSS file to reference icomoon. Your .htaccess may be rewriting the URL. Secondly add the following in .htaccess file just as webkub pointed out.
<FilesMatch ".(ttf|otf|eot|woff)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>
</FilesMatch>

Answer 5

If you're running IIS, you'd want to modify your web.config and probably add the httpProtocol section as shown below:
<?xml version="1.0" encoding="utf-8"?>
<configuration>
<system.webServer>
<httpProtocol>
<customHeaders>
<add name="Access-Control-Allow-Origin" value="*" />
</customHeaders>
</httpProtocol>
</system.webServer>
</configuration>