Fontello Glyph Font odd behaviour on Firefox, shows unicode codes instead of icons

Question

I have a webpage. In its upper right corner I have some social icons. It shows okay in Chrome (both local and on the webserver), it shows ok in local FF, but on the online page I see the square placeholders with the Unicode codes inside.

Oddly enough, if i open Firebug and correct the fontello.css on the fly via Source Edit, the icons appear magically, or so it seems, and this even with trivial corrections like adding and then removing a whitespace.

This is really puzzling me. Any suggestions?

Twitch

I see the images with FF... – Charpoy

@AndreaLigios: Yes, the problem has been solved. It was a header problem from the Apache servere. I'll close the answer. – Twitch

Answer 1

I've managed to solve this strange issue. Turned out it was an Apache problem, got the solution from: http://www.fontsquirrel.com/blog/2010/11/troubleshooting-font-face-problems

I've added to my .htaccess the following lines:

If you are serving from Apache, you can add this to your .htaccess file to allow your site access to the fonts:

<FilesMatch "\.(ttf|otf|woff)$">
<IfModule mod_headers.c>
        Header set Access-Control-Allow-Origin "*"
</IfModule>
</FilesMatch>

and the font now is ok.

Twitch

Thanks! Fixed it for me. I added the eot extension too since that's used by fontello. – Squeaky

Where can I find my .htaccess (I assume it's a file?) in windows 7? – Filippa

@Zarah The .htaccess file is not tied to an operating system, it is used for Apache server configuration in your web folders. – Twitch