Search code examples
htmlcsswebfonts

Moved css to sub domain and now web fonts only load in Chrome

For purposes of SEO, I recently moved my css and img directories from www.findgamers.us to static.findgamers.us and the Entypo fonts won't load in IE or Firefox. Ironically they are showing up in Chrome.

All of my other styles and images seem to be working perfectly. And I'm still mystified why it works fine in Chrome but not the other two browsers.

As I understand it, urls in style sheets are relative to the location of the style sheet. The Entypo directory does sit in the css directory where the style sheets are located.

Here is whats in the style sheet where it loads the font.

@font-face {
    font-family: 'EntypoRegular';
    src: url('Entypo/entypo-webfont.eot');
    src: url('Entypo/entypo-webfont.eot?#iefix') format('embedded-opentype'),
         url('Entypo/entypo-webfont.woff') format('woff'),
         url('Entypo/entypo-webfont.ttf') format('truetype'),
         url('Entypo/entypo-webfont.svg#EntypoRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

I've tried adding the full url to the url like so http://static.findgamers.us/css but it doesn't seem to work, nor do any of the other path options I've tried.

Suggestions?

Solution

  • IE and Firefox don't allow cross-domain by default. Only Chrome does.

    So you have to specify the url in the style sheets, then allow cross domain in htaccess or in the php header settings. For instance, this is what you'll have to do in htaccess.

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