So following videos here at css tricks I decided to try out icon fonts, everything is good, but for some reason they are not working in firefox. I got custom fonts from icomoon app.
Here is what I do to on my page:
src: url(‘//bit.ly/ZxomPz’) format(‘woff’),
font-weight: 400 !important;
I don’t see why this is not working in firefox, instead of icon I’m just getting a value which is in data-icon attribute of span, in this case “1”
And long story short, add this to your .htaccess:
Header set Access-Control-Allow-Origin “*”
Though I would recommend setting that to your domain, instead of an asterisk. Just to be safe.
I ran into this same issue, and this fix only worked on FontSquirrel’s Basic settings (ie this setting: ‘Straight conversion with minimal processing.’). Optimal and Expert processing gave me back empty files. Hopefully this saves future searchers some time.
But, it works! Thanks for the advice.
@gin85cc I was having the same issue on Firefox. Worked on local setup but not on my WPengine server. I ran the TTF through Font Squirrel (Basic ettings) and now it works fine. The one thing is you have to go into IcoMoon’s style.css file and change the font family from ‘icomoon’ to ‘icomoonregular’, as Font Squirrel seems to name it differently. Hope that helps.
I just had this issue on a site in development, and the same problem was occurring in Chrome and Safari, as well. Per one of Josh’s links above, I added the .htaccess file to folder containing the custom font files, as well as running the faces through FontSquirrel. So, far, so good (but still in local dev). I’ll see how things go when the site is pushed live.
Thanks a lot! I was gettin’ real frustrated and wondering how I was going to fix this problem. I’m not sure which one (running through fontsquirrel or the .htaccess statement) or combination of both that fixed the issue, I did both, but voila! there the icons were pretty as could be. I should mention, the same problem was happening in IE 11 as well as FF 28, but the problem is solved in both now. It just love it when a plan comes together!
I had exactly this problem with Icomoon icons not appearing in Firefox. What seemed to work for me was to remove the ‘ ?u3a5ce’ from the Woff and TTF font URL’s. Firefox is now displaying all icons. Just hope by doing this I’ve not caused any other issues.
Great site by the way Chris, I refer to posts here on an almost daily basis.
You must be logged in to reply to this topic.
*May or may not contain any actual "CSS" or "Tricks".