Using Typekit / Web Font Services

[woodbridge]

Hey there,

I'm trying to using fonts provided by Typekit with wysihtml5. Typekit works by pulling down a CSS file that is authenticated by the referrer. I'm inserting that CSS request in the iframe, however because the src is blank, the referrer header is blank. Is there a good way around this or is the blank iframe too integral in the design?

Thanks!

[Zygar]

I'm having this same issue—would be fantastic if there's some kind of workaround, because it falls back to Georgia. :-(

[noisik]

Any update on this topic?. ilooking for this too.

[tiff]

Sorry, no idea how to make sure that the referrer is correctly passed to Typekit. The iframe is in fact an integral part of wysihtml5, so there's currently no workaround.

Have you tried pinging the guys at Typekit? Checking the referrer is not a very smart auth way... so I personally don't think that wysihtml5 is the problem here.

Are there any other ways to authenticate with Typekit?

[noisik]

Hmm, not sure on Typekit. This morning I tried changing fonts but nothing work; the problem was mine because I hadn't configured the stylesheet settings for the iframe.

Sorry about that, Im newer with wysiwyg editors, :/

[tiff]

I'm closing this since I have absolutely no clue how to work around this and as said I think that Typekit should come up with a fix. I don't have the time getting in touch with the Typekit Devs but if somebody would I'd be happy to know what they think.

[alainmeier]

I've emailed Typekit now to see if they can help come up with a workaround. I'll get back to you all once I receive a response.

[alainmeier]

Looks like a no-go:

"Hi Alain,

Thanks for the reference on the wysihtml5 repository. If I understand correctly, the iframe that program creates has an empty "src", so the referrer being passed by the browser is also empty.

Typekit uses the browser referrer to validate the domain name against the list of fonts on the kit. This is done, for instance, to ensure that someone else cannot add your kit ID to their site and use your Typekit plan without your knowledge. If the embedded page in the wysihtml5 iframe sends a blank referrer by default, then it is not possible to use Typekit with it.

It may be possible to modify wysihtml5 so that the iframe sends the same referrer as the parent page, which would then enable you to use Typekit. There are no plans to change the current HTTP referrer checking method.

Sorry I couldn't be of more help,
-- liz"

[tiff]

Thanks @alainmeier

[Zygar]

I've personally ditched Typekit in favour of FontDeck which uses @font-face, but still relies on a valid referrer being passed. I've been trying to figure this out myself but my JS-fu is weak.

I did, however, find this http://benvinegar.github.com/seamless-talk/#/24

EDIT: The whole slide deck is a goldmine btw—http://benvinegar.github.com/seamless-talk/#/32

I'm not sure where exactly this blob of code would go or if it would even fix this issue—anyone with a bit more skill got any ideas? :-)

[scottoreilly]

We got this working based on the code contained here:
http://amalraghav.com/articles/get-typekit-fonts-working-with-epiceditor-or-inside-iframe

[gib]

Thanks @scottoreilly!

[mattgoldman]

@scottoreilly Did you change anything in that code sample to get it working with wysihtml5? Thanks!

[jerryorr]

We actually ended up going with the Font events asynchronous pattern at http://blog.typekit.com/2011/05/25/loading-typekit-fonts-asynchronously/

However, we're currently having issues with Firefox when the site is SSL. For some reason, the request to typekit from the iframe is http and does not include the referrer. I'll post here if and when I figure it out.

[mattgoldman]

@jerryorr thanks Jerry, I got it working 👍