typekit: Failed on Firefox, Worked on Chrome and Safari

Question

I could embed a typekit-hosted font on Chrome and Safari but, for some reasons, not on Firefox. I am running FF v9.0.1 but I don't think it is related to the version (because the same thing happened on FF 8).

From the Firebug Console tab, I got the following error message:

NetworkError: 403 Forbidden - http://use.typekit.com/k/amh2oiv-d.css?3bb2a6e ... (and a bunch of other chars)

The part that I don't understand is it worked well on Chrome and Safari, which validated that my Typekit "kit" and JS code had been configured properly. Any other info that I should find out to resolve this issue?

Answer 1

Do you by any chance have referrers turned off on firefox? Any extensions that handle privacy settings?

if you can see the fonts in other browsers then it has to be something that is blocking the referrer from Firefox from being passed into Typekit. All web font services require that referrer to be present so they can tie the font to the domain for security purposes.

Answer 2

Complementing Brad, those are the FF configs about http referers:

0 : Never send the Referer header or set document.referrer.

1 : Send the Referer header when clicking on a link, and set document.referrer for the following page.

2 : Send the Referer header when clicking on a link or loading an image, and set document.referrer for the following page. (Default)

source: http://kb.mozillazine.org/Network.http.sendRefererHeader

Typekit needs this config in: 2... so:

1. open firefox.
2. type about:config in URL address box.
3. search for: network.http.sendRefererHeader
4. if value is 0 or 1, FF is not sending the referers when loading page resources, set it to 2 to make it works.
5. test it

It worked for me :)