Grow your CSS skills. Land your dream job.

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

  • # March 8, 2013 at 3:03 pm

    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”

    # March 8, 2013 at 3:33 pm

    See: [this link](http://www.red-team-design.com/firefox-doesnt-allow-cross-domain-fonts-by-default) and [this link](http://www.cssbakery.com/2010/07/fixing-firefox-font-face-cross-domain_25.html)

    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.

    # March 8, 2013 at 6:39 pm

    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.

    # March 9, 2013 at 7:01 pm

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

    # April 24, 2013 at 5:54 pm

    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.

    # May 24, 2013 at 5:58 pm

    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?

    # June 3, 2013 at 9:02 pm

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

    # June 3, 2013 at 9:05 pm

    Is it only Firefox?

    # June 19, 2013 at 12:54 pm

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

    # December 20, 2013 at 12:15 pm

    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.

    # April 1, 2014 at 10:32 am

    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!

    # April 15, 2014 at 1:56 pm

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

    # May 5, 2014 at 1:36 pm

    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.

Viewing 13 posts - 1 through 13 (of 13 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".