1

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>
user1555076
  • 327
  • 2
  • 5
  • 16

4 Answers4

3

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
Patrick
  • 3,490
  • 1
  • 37
  • 64
  • It involves several hundred subdomains, so even though your solution will fix the issue, it's not really an option. Thanks for you thoughts! – user1555076 Sep 26 '12 at 11:38
  • You'll have to head down the CORS route then : ) – Patrick Sep 26 '12 at 11:42
  • Did that, but only fixed my problem for Mozilla, IE still not showing my font on the subdomain, only on the main domain. Code I used is in my main post. – user1555076 Sep 26 '12 at 11:46
  • What does the developer console say? – Patrick Sep 26 '12 at 11:50
  • Also check if the fonts working in ie6-9, since 6-8 use `.eot` and 9 uses `.woff`. – Patrick Sep 26 '12 at 12:20
  • That's very strange! IE9 loads the .EOT just fine on the main domain, but not on the submdomain! Adding a .WOFF to my CSS fixed the issue! Thanks a lot for your help! – user1555076 Sep 26 '12 at 12:40
  • Interesting. Check out the Developer console and see if the file was 404ing or if it was a CORS issue. – Patrick Sep 26 '12 at 12:45
0

Have you checked the filepaths to your font files? That would be the first place I'd look. If your subdomains are set up as subfolders of your web root, you'll need to alter those filepaths.

Think of using absolute instead of relative paths: http://www.domain.com/fonts/proximanova-semibolt.tff instead of ../fonts/proximanova-semibold.tff

0

Sounds like a CORS issue. The solution is most likely to update your .htaccess file on the main server.

If you look at the answer to this question I think it will help you:

@font-face import not working in offline website/different host using online fonts via CSS in IE only

His issue ended up being some problem with the EOT file itself, but the CORS issues are addressed in the ORIGINAL ANSWER section of the accepted answer.

Community
  • 1
  • 1
George Mandis
  • 791
  • 1
  • 4
  • 18
  • That did actually help and fix my issue for firefox (or so I think that's what fixed it). However: IE is still having the same problem, main domain just working fine, subdomain showing Arial.. I added a .htaccess in my fonts folder with the code that I put in my main post. – user1555076 Sep 26 '12 at 11:45
0

Make sure you have all formats, then you maybe need review the weight,mozilla some times takes with bold by defualt, this code works for me, hope will be of great help.

IE is a special case, for this you can use a library called Prefix Free. And look here the support @font-face in browsers

@font-face
{
    font-family: "MyFavoriteFont";
    src: url("KomikaTitle-webfont.eot");
        xsrc: url("KomikaTitle-webfont.eot?#iefix") format("embedded-opentype"),
     url("KomikaTitle-webfont.woff") format("woff"),
     url("KomikaTitle-webfont.ttf") format("truetype"),
     url("KomikaTitle-webfont.svg#KomikaTitleRegular") format("svg");
}
LaBE
  • 117
  • 1
  • 9
  • Thanks for your help, I'm pretty sure the problem isn't the CSS though, since IE shows the correct font just fine on the main domain. – user1555076 Sep 26 '12 at 11:40