I've successfully installed @font-your-face, and it works just fine with Google Fonts.

With Typekit, however, I'm getting 403 errors in my console output.

I've contacted their support, and they've checked out my Kit settings, and all seems well there.

I noticed that in the source of my pages I'm seeing 

<script type="text/javascript">
<!--//--><![CDATA[//><!--
try{Typekit.load();}catch(e){}
//--><!]]>
</script>

Typekit support says the CDATA wrapper is causing the problem.
I'm not sure where this getting added - does the module do this? Or is there some setting in Drupal that I've misconfigured?

Sorry if this isn't really a @font-your-face question, but I don't know where else to ask.
Any help appreciated.

Comments

sreynen’s picture

sreynen commented
Status: Active » Postponed (maintainer needs more info)

If Typekit support really said that, they're almost certainly wrong. That's how Drupal does all inline JavaScript. It's valid HTML and should have no impact on which HTTP requests are happening. It's also used on many, many sites to load Typekit, none of which seem to have 403 problems. See, for example: http://drupal.webstocks.ws/

Which URL is returning the 403 error?

sam moore’s picture

sam moore
he/him
Location Sandy Hook, CT
commented

Thanks for writing.
Here's what Typekit support said about that:

the typekit code is getting wrapped in a CDATA block, as you can see in your source view:

<script type="text/javascript">
<!--//--><![CDATA[//><!--
try{Typekit.load();}catch(e){}
//--><!]]>
</script>

We've seen this issue before with certain publishing platforms. Correct this to
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>

They almost certainly are not all that familiar with Drupal, so thanks for that input.

When you ask "which URL" - do you mean the url of my site that's in development? It's at http://bluecdev.resonetrics.com
Here's the console output:
"NetworkError: 403 Forbidden - http://use.typekit.com/k/daj3fbd-d.css?3bb2a6e53c9684ffdc9a9afe1d5b2a6262b4be0bfc491ced4e51bae72a437aca9dba25b123d6939a6506a4434599001029ab445ddf697998455247396a2d7120bd65c572c4bcd9164d2358d6275167e4d99bf4fb660a89"
daj3fbd is the correct Typekit Kit ID according to the kit editor for this kit.
The domains for this kit are set to "resonetrics.com, .resonetrics.com"

I'm trying to use their font Proxima Nova.
In the @font-your-face browser(at admin/appearance/fontyourface/browse/typekit_api), this font does not render properly , though its 14 variations do show up in the list. In fact my browser seems to think it's a serif font - it's not - which tells me I'm seeing a fallback.
So that tells me I'm communicating with Typekit and it's returning the list of fonts in my kit, it's just not sending the actual fonts.

I should add that my client's plan allows for unlimited websites/kit and unlimited fonts (the Portfolio plan, they call it).

Any ideas where to look next?

sreynen’s picture

sreynen commented
Status: Postponed (maintainer needs more info) » Fixed

Wow, that support person needs more training. That's just totally wrong on multiple levels. That's valid HTML, so it doesn't need to be "corrected." What they suggested is actually invalid, incorrect. It also has absolutely no effect on the 403 error on the Typekit server. And did they really use lowercase on their own brand name too? Wow.

A 403 error on the CSS means Typekit isn't authorizing your site to load the kit. That will cause the fonts to not load, which will make the text render with a fallback font. It sounds like that's what you saw. This can happen for many different reasons, and only Typekit will know for sure, but some common causes are a domain mismatch (which doesn't sound like the case here) and Tyepkit's kit cache not updating fast enough.

I just loaded http://bluecdev.resonetrics.com and the proxima nova font is loading fine for me with no 403 error, so I suspect it was just a stale cache. If it's still not working for you (after clearing your browser cache), please re-open this. Meanwhile, I'm going to contact Typekit and point out their support here left much to be desired.

sam moore’s picture

sam moore
he/him
Location Sandy Hook, CT
commented

Yep, it's working for me now too - dunno if it was a matter of flushing cache or just waiting for the kit to propagate, but in any case we have liftoff.
Thanks for your help, and of course for the quite-useful module.
Cheers

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.

stuajc’s picture

stuajc commented

Weird, just had the exact same issue with the same font, Proxima Nova...clearing the browser cache fixed it. Thanks!