CODEWITHSUNDEEP
cssfontsiconsfont-faceglyph
LeeTee
LeeTee

Reputation: 6601

icon fonts - icomoon - @font-face not showing when on different server

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;
}

Upvotes: 0

Views: 4219

Answers (1)

Loic
Loic

Reputation: 530

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.

Upvotes: 1

Related Questions