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

Question

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?

what errors (if any) do you see in the dev tools console? FWIW, Chrome is probably using a cached copy. — Stephen Thomas, Mar 09 '14 at 16:06
Shomz, you are on to something. https://developers.google.com/fonts/docs/troubleshooting — Maelish, Mar 09 '14 at 16:30
That was it. You have to specify the url in the style sheets, then allow cross domain in htaccess or in the php header settings. — Maelish, Mar 09 '14 at 16:45

score 0 · Accepted Answer · answered Apr 01 '14 at 16:34

0

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>

answered Apr 01 '14 at 16:34

Maelish

1,600
4
18
25

As of 2017 when I met such issue again, Chrome also blocked cross-domain web-fonts by default. – Evi Song Mar 02 '18 at 04:38

score -2 · Answer 2 · answered Mar 09 '14 at 20:38

Probably not the answer you want to hear - but move them back to the old configuration if it worked?

As an SEO (with a lot of website load speed experience) I can tell you two things:

1) It will not help SEO to have your CSS on the subdomain.

2) It is a bit of a myth that moving content to a 'cookieless' subdomain will improve load speed. More often than not it actually slows it down. This is both from experience, and from reference.

What I can 100% confirm will help, is minified CSS, correct expire/caching rules, and GZIP.

Hope this helps! Colin

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

2 Answers2