Menu icon Foundation
Foundation-icons fonts doesn't show up in Firefox browser.

Hey all !
I'm a newbie to Foundation5 framework. Help me resolve this issue.

The foundation-icon fonts doesn't show up in Firefox browser.
I understand that Firefox doesn't support cross fonts. Do we have a fix for this with respect to foundation5 in the framework itself ?

I tried the .htaccess file method and app.css but nothing seems to sort out the problem.
What else do I need to do or change or create ?

//htaccess file code

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



/*app.css file code*/


@font-face {
font-family: 'foundation-icons';
src: asset-url('../font/foundation-icons/foundation-icons.eot', font);
src: asset-url('../font/foundation-icons/foundation-icons.eot?#iefix', font) format('embedded-opentype'),
asset-url('../font/foundation-icons/foundation-icons.woff', font) format('woff'),
asset-url('../font/foundation-icons/foundation-icons.ttf', font) format('truetype'),
asset-url('../font/foundation-icons/foundation-icons.svg#foundation-icons', font) format('svg');
font-weight: normal;
font-style: normal;

}



         

foundation-iconsfirefoxsocial Icons

Hey all !
I'm a newbie to Foundation5 framework. Help me resolve this issue.

The foundation-icon fonts doesn't show up in Firefox browser.
I understand that Firefox doesn't support cross fonts. Do we have a fix for this with respect to foundation5 in the framework itself ?

I tried the .htaccess file method and app.css but nothing seems to sort out the problem.
What else do I need to do or change or create ?

//htaccess file code

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



/*app.css file code*/


@font-face {
font-family: 'foundation-icons';
src: asset-url('../font/foundation-icons/foundation-icons.eot', font);
src: asset-url('../font/foundation-icons/foundation-icons.eot?#iefix', font) format('embedded-opentype'),
asset-url('../font/foundation-icons/foundation-icons.woff', font) format('woff'),
asset-url('../font/foundation-icons/foundation-icons.ttf', font) format('truetype'),
asset-url('../font/foundation-icons/foundation-icons.svg#foundation-icons', font) format('svg');
font-weight: normal;
font-style: normal;

}



         
Bobby Fritze over 3 years ago

I'm not good with expressions in .htaccess, but someone on SO said this worked...
(I guess it would depend on if it's a UNIX server or nginx server or other)

location ~* .(eot|otf|ttf|woff)$ {
add_header Access-Control-Allow-Origin *;
}

Source: http://red-team-design.com/firefox-doesnt-allow-cross-domain-fonts-by-default/

I've also seen suggestions about using Base64.

P.S.
I think it's worth noting that webkit browsers don't need the .woff file.
Even IE11 renders the Foundation Icons.