Forums

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:

<span data-icon="1" aria-hidden="true"></span>

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

JoshBlackwood

See: this link and this link

And long story short, add this to your .htaccess:

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

Though I would recommend setting that to your domain, instead of an asterisk. Just to be safe.

chriscoyier

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.

treehouse : what would you like to learn today?

Forums

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