Ever tried putting Typekit fonts on a site then trying to style the editor text in the backend?
After trying many solutions, such as putting it in the admin header ( didn’t work ), or embedding the JS code in the editor iframe ( typekit security killed this ), I found a solution that worked!
By using the asynchronous typekit embed code, I finally got it working! A big thanks to Chris Van Patten for pointing it out!
So I created a tinymce plugin:
Save the code in typekit.tinymce.js in your theme template folder. Then, modify the kitID, and add then activate the plugin by adding the lines of PHP in your themes functions.php :
Once that’s done, you will have the fonts loaded in your editor, and you can use them in your editor style css without issues.
Update – 2012/10/03
It would appear sometimes it doesn’t work, and that the typekit security may have been improved. The likely reason it works sometimes is browser cache, so visiting and loading the font on the frontend should be enough.
The root problem to fixing this completely, is that the TinyMCE iframe has no source, it’s a blank iframe, so any AJAX inside has no referrer, and the referrer is what Typekit uses to enforce security. If an empty page from the hosted sites domain could be loaded instead, then the request would have a referrer or origin domain, and the fonts would be loaded
Update – 2013/3/25
After testing I’ve discovered why some people have issues and some don’t. The JS will always fail given a blank slate due to the security issue mentioned above. However, if the user has already loaded the fonts on the front end, the browser will make no attempt to grab it in the TinyMCE editor, and use what it got earlier in the cache, resulting in Typekit fonts working in TinyMCE.
So, to get this reliably working, ensure that the user sees the typekit fonts prior to going to the editor page. There are likely tricks that can exploit this such as loading it in the admin backend and the TinyMCE plugin too, if anybody has any luck with those let me know