CSS @font-face absolute URL from external domain: fonts not loading in firefox

Question

http://fwy.pagodabox.com

http://friends-with-you.myshopify.com/

I have my fonts and css hosted on a pagodabox.com server, and am developing the store section on shopify. I want to use the same stylesheet from the pagodabox hosted site for the shopify site. But my fonts aren't loading in firefox, version 13.0.1

Is there an issue with FF or with my syntax? Thanks!!!

@font-face {
  font-family:'IcoMoon';
  src:url('http://fwy.pagodabox.com/magic/themes/fwy/assets/fonts/IcoMoon.eot');
  src:url('http://fwy.pagodabox.com/magic/themes/fwy/assets/fonts/IcoMoon.eot?#iefix') format('embedded-opentype'), url('http://fwy.pagodabox.com/magic/themes/fwy/assets/fonts/IcoMoon.svg#IcoMoon') format('svg'), url('http://fwy.pagodabox.com/magic/themes/fwy/assets/fonts/IcoMoon.woff') format('woff'), url('http://fwy.pagodabox.com/magic/themes/fwy/assets/fonts/IcoMoon.ttf') format('truetype');
  font-weight:normal;
  font-style:normal;
}

@font-face {
  font-family:'square';
  src:url('http://fwy.pagodabox.com/magic/themes/fwy/assets/fonts/SquareSerif-Light-webfont.eot');
  src:url('http://fwy.pagodabox.com/magic/themes/fwy/assets/fonts/SquareSerif-Light-webfont.eot?#iefix') format('embedded-opentype'), url('http://fwy.pagodabox.com/magic/themes/fwy/assets/fonts/SquareSerif-Light-webfont.woff') format('woff'), url('http://fwy.pagodabox.com/magic/themes/fwy/assets/fonts/SquareSerif-Light-webfont.ttf') format('truetype'), url('http://fwy.pagodabox.com/magic/themes/fwy/assets/fonts/SquareSerif-Light-webfont.svg#SquareSerifLightRegular') format('svg');
  font-weight:normal;
  font-style:normal;
}

Answer 1

You can’t use @font-face in Firefox with a font hosted on a different domain If you want to specify a font for @font-face using an absolute URL, or a font hosted on a different domain, it needs to be served with Access Control Headers, specifically the Access-Control-Allow-Origin header set to '*' or the domains allowed to request the font. This also applies to fonts hosted on a different sub-domain. If you are using Apache you can try to put this in your .htaccess and restart the server

AddType application/vnd.ms-fontobject .eot
AddType font/ttf .ttf
AddType font/otf .otf
<FilesMatch "\.(ttf|otf|eot)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>
</FilesMatch>