0

When I first downloaded the icons they worked in all browsers. However now its live and the fonts live on a different server, it doesn't work in IE or Firefox but is fine in Chrome and Opera. Anyone any ideas? I have tripple checked the code and ensured all the fonts are on the server.

@font-face {
font-family: 'icomoon';
src:url('http://static.mydomain.com/design_media/fonts/icomoon.eot');
src:url('http://static.mydomain.com/design_media/fonts/icomoon.eot?#iefix') format('embedded-opentype'),
    url('http://static.mydomain.com/design_media/fonts/icomoon.svg#icomoon') format('svg'),
    url('http://static.mydomain.com/design_media/fonts/icomoon.woff') format('woff'),
    url('http://static.mydomain.com/design_media/fonts/icomoon.ttf') format('truetype');    
font-weight: normal;
font-style: normal;
}
LeeTee
  • 6,401
  • 16
  • 79
  • 139

1 Answers1

1

There are some XSS limitatons for fonts like for JS files.

To avoid those limitations, you have to configure your server to allow cross-domain font files.

In Apache, you have to install the Header module and add this in your conf :

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

Edit: the "*" parameter after Access-Control-Allow-Origin could probably be limited to specific domains.

See http://www.w3.org/TR/cors/ for further informations.

Loic
  • 451
  • 3
  • 6
  • Wouldn't this allow anyone to access all `.ttf, .ttc, .otf, .eot, .woff` files from another site? – hitautodestruct Aug 07 '13 at 14:35
  • hmm, I'm not an expert in Apache administration but I guess you could limit the cross-domain access only from your domains. – Loic Aug 07 '13 at 16:04
  • should be mentioned so someone doesn't accidentally use this for production (not that it's such a security hole) but still.. – hitautodestruct Aug 07 '13 at 18:30
  • I've got the same problem. Local, the font is working perfectly, but once live it doens't work. (In Chrome, FF nothing is coming through, in IE instead only 1 icon is working..) Did you find a solution for this problem? Or do you know how I might possibly fix this? – Jeroen Bellemans Apr 03 '15 at 08:06