Question

I have both my CSS files and my Font files under the main domain, let’s say under

http://www.mydomain.com/css and http://www.mydomain.com/fonts

I also have files on some subdomains and these files need to share the css and font
style of the main domain files. Therefore I just this at the top of my files:

<link rel="stylesheet" type="text/css" href="http://www.mydomain.com/css/algemeen.css" media="all" />
<link rel="stylesheet" type="text/css" href="http://www.mydomain.com/css/gemeenten.css" media="all" />
<link rel="stylesheet" type="text/css" href="http://www.mydomain.com/css/sidebars.css" media="all" />

All works great, the CSS shows up just fine. However, in these CSS files I make use of @font-face. This code on itself works fine in all browsers, at least, for the files on the main domain. So http://www.mydomain.com/index.php shows my chosen font perfectly in all browers. However, the index.php on my subdomain which is using the same CSS is not displaying my chosen font in IE or Firefox! It just uses standard Arial. Safari, Opera en Chrome work just fine. How is this possible? My @font-face code:

@font-face {
   font-family: "Nova"; font-weight: normal;
    font-style: normal;
   src: url("../fonts/proximanova-regular.eot");
}
@font-face {
   font-family: "Nova";
   src: url("../fonts/proximanova-semibold.eot");
   font-weight: 900;
}
@font-face {
   font-family: "Nova"; font-weight: normal;
    font-style: normal;
   src: url("../fonts/proximanova-regular.ttf") format("truetype");
}
@font-face {
   font-family: "Nova";
   src: url("../fonts/proximanova-semibold.ttf") format("truetype");
   font-weight: 900;
} 

Thanks guys!

Already added a .htaccess with this code in the fonts folder:

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

Answer 1

This is a CORS issue.

http://en.wikipedia.org/wiki/Cross-origin_resource_sharing

http://www.w3.org/TR/cors/

http://enable-cors.org/

The simpler solution would just to copy your font files so they exist on the sub domain. The majority of the CSS code is fine, it’s just the @font-face code that you’ll need to put into a new file which would relatively link to a local font folder. Keeping the structure the same in both domains means you could just c+p the CSS/fonts without needing to create specific code.

• /www/
  • /css/
    • main.css -> everything but @font-face
    • font-face.css -> src: url("fonts/font.eot")
    • /fonts/
      • font.eot
• /subdomain/
  • index.htm -> reference http://domain.com/css/main.css and css/font-face.css
  • /css/
    • font-face.css -> src: url("fonts/font.eot")
    • /fonts/
      • font.eot