[SOLVED] @font-face font not loading in some IE 9 browsers.

[Gorgalore]

I am at a complete loss here.

I have a webpage that utilizes a custom font through @font-face. The font loads well and everything looks great in all browsers. I tested the site in Firefox, Chrome, and all major versions of IE. Looked great - no problems.

That is, until one of the clients showed that the font wasn't loading on his end. On a mirrored staging website, it loads fine for him.

So I assumed his browser had cached an old CSS file, but after doing a full refresh in IE 9 (CTRL+F5), and even deleting the Temporary Internet Files, it still doesn't load the font. Tonight I got an email that says he looked at the site on another computer in his household, and the font was messed up there as well.

Is there some reason why the browsers on the computers in his household wouldn't load the font after all this? Could the browser be having cache issues? It's frustrating.

The webpage in question is: http://cleanedge.com/clean-tech-nation

[Gorgalore]

Well, I figured out the solution to this issue. Turns out the site I was working on wasn't using canonized URLs.

Apparently, if your site is http://www.example.com, but your fonts are being loaded from http://example.com, you'll run into this issue.

Forcing the site to use only www (or to not use any subdomain) will fix this issue, and also resolves a troubling SEO issue as well (URLs should be canonized to prevent duplicate content issue).

The .htaccess was modified to force this change like so:

RewriteCond %{HTTP_HOST} ^example.com$
RewriteRule (.*) http://www.example.com/$1 [R=301,L]

(where example.com is your domain).

So, no help needed here, but thought I'd come back to post my solution. Maybe it helps someone else someday.