font awesome – not working

After quite a bit of headscratching I’ve found this:
https://stackoverflow.com/questions/10638476/font-awesome-not-displaying-properly-on-firefox

The icons works in Chrome, Safari etc. However, Firefox does not, because it follows W3C spec:

Firefox only allows cross-domain linking of fonts if the server the font is on sends the right CORS headers. And it does this because the spec very clearly says to do it, at https://dev.w3.org/csswg/css3-fonts/#default-same-origin-restriction

Now, I know some stuff about code, but I have no idea about server CORS headers. Perhaps something you can ask your server provider about.

Edit: More about this:
https://github.com/MaxCDN/bootstrap-cdn/issues/27%29:
https://github.com/cdnjs/cdnjs/issues/755

The server should give the proper headers to allow access

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

^ Ask your host to help you with that perhaps.

Example htaccess files from maxcdn, which fixes this issue among other things:
https://support.maxcdn.com/tutorials/htaccess-examples/

Thanks Alexander – unfortunately I’m a bit of a html retard – I hardly understand most of what you write – other than the part that awesome fonts don’t work in firefox (they don’t work in ie either). As a marketer it seems odd to me that this is the case for the two most popular browsers on the web. Of course people tell me chrome etc is better yet the punters vote with what they’re using – it maybe simpler for me to use another template although I notice most ‘responsive’ templates all use font awesome in one way or another. Thanks for your assistance its much appreciated.

Hey,

just put this in your .htaccess and it works:

<IfModule mod_headers.c>
<FilesMatch “\.(eot|font.css|otf|ttc|ttf|woff)$”>
Header set Access-Control-Allow-Origin “*”
</FilesMatch>
</IfModule>

Thats great thank you – but unfortunately I have no idea what .htaccess is or where to find it. Templates I can play with – the rest is beyond me. Thank you anyway.

This is a file located on your server. You need to access your WordPress installation with an FTP client. Open it with an editor and store the above.

Like I said – I have no clue. Network Solutions is my host they dont even seem to offer the service – I might have to simply opt for a template that works. Thanks again.

Thank you very much Tadaeus for the tip on .htaccess. I had this issue of fontawesome not displaying properly. It does display the square icon, but the icon inside the square or circle displays numbers instead of the icon I set.

Found this thread, and your solution of putting the code in .htaccess works perfectly! All fontawesome icon are now displaying as they should.

Btw, I’ve used this with the The7 WP premium template and I’m guessing it’s not an issue with the template, but from the website’s server. I haven’t contacted the host since I’ve got it working already.

Thank you again @tadaeus ??