[Solved] @font-face icon font not working in firefox

[Ilya]

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:

<br>

@font-face {
font-family: ‘icon-font’;
src: url(‘//bit.ly/ZxomPz’) format(‘woff’),
url(‘//bit.ly/WPGMJF’) format(‘truetype’),
url(‘//bit.ly/16eqBwn’) format(‘eot’),
url(‘//bit.ly/16eqLDZ’) format(‘svg’);
}

[data-icon]::before {
font-family: ‘icon-font’;
font-weight: 400 !important;
content: attr(data-icon);
text-transform: none;
margin-right: 3px;
position: relative;
top: 8px;
right: 5px;
font-size: 31px;
line-height: 0;
}

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”

[Chris Coyier]

What Josh said, but also, I’ve had a situation where I had to run an IcoMoon export through Font Squirrel (http://www.fontsquirrel.com/) to get it to work in Firefox as well. So try that if you’re font is actually local and not working.

[Ilya]

Thanks, for some reason just running fonts through font squirrel solved the problem.

[hisnameisjimmy]

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.

[dreamer]

some of my icon fonts are not working on firefox, but they are working on my local computer. I’ve tried the solutions provided here but no luck. any ideas?

[gin85cc]

Same issue, works fine on local with Firefox (Mac os) but not on live site. Re-upload font to FontSquirrel Webfont Generator still having the problem after that…However, its working fine on other computers just not mine..

[chrisburton]

Is it only Firefox?

[souverian]

@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.

[karolus]

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.

[sonofadoc]

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!

[kpunches]

.htaccess consisting of:

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

in the folder containing the fonts.

Bang. You guys saved hours of heart/headache. Thank you!

[Mark]

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.

[Lauren]

I tried everything above, and it didn’t work, but I found another generator that works in all browsers. Fontastic

It has all the same libraries at Icomoon.io It helped me, it may help someone else

[Lenyman]

I registered just to say Thank You and to confirm that the simplest and working solution is what “kapunches” said:

.htaccess consisting of:

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

in the folder containing the fonts.

This solved the problem in Firefox and in IExplorer ;-)

[Author]

Posts