Typekit WP Editor Styles

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:

View the code on Gist.

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

31 thoughts on “Typekit WP Editor Styles

  1. Pingback: Typekit & “BESbswy” | Tom J Nowell

    • I have but I’ve also noticed that going to the frontend and coming back fixes the issue. I believe the browser bypasses the security and goes straight to the cache when available, side-stepping the entire problem and fixing the issue

  2. I had a couple of questions for you guys. Basically, I followed the instructions. Created the (2) file names typekit.editor.php and typekit.tinymce.js and put those files in my main template folder of my theme. My question is in regards to the activation of the plugin using the functions.php file. How would you do this, what is the code? Is there any security issues with enabling a plugin through the functions file?

    thanks for you help!

    • Just the one guy =p

      The TinyMCE plugin is for TinyMCE, it’s not a WordPress plugin, and has nothing to do with WordPress plugins. So there is no activation button, it wouldn’t make any sense if there was, in the same way that an activation button for a jQuery library like jQuery UI would make no sense.

      What’s more the only place it gets loaded is in the iframe in the post editor, and the only thing it does is add the TypeKit code. The biggest risk here is that Adobe decides to hijack this, but I dont see a FTSE100 company targeting you, and if it did it would only impact the WYSIWYG editor.

      So there should be no issues other than it either works or doesn’t work.

  3. Hi there,

    thank you very much for your investigative work; I was able to make Typekit work in some off-shoot TinyMCE (Joomla’s JCE) thanks to your research 🙂

    Just a quick note: You can’t add to script tags in IE <9 via appendChild(). Just use

    var scriptTag = document.createElement('script');
    scriptTag.text = jscript;

    – works in all Browsers, as far as I can tell. I have some clients working in the public sector stuck on Windows XP, which is why I have to support IE8.

  4. Great stuff Tom. Rookie questions… I’ve installed the TinyMCE wordpress plugin, inserted the code (js and php) and now the ‘Visual’ tab shows the blank screen. What did you mean by “So, to get this reliably working, ensure that the user sees the typekit fonts prior to going to the editor page.” ?? Cheers, look forward to it working!

    • The Typekit code loads from Typekits servers, which implement the security, e.g. on this site *.tomjn.com. So my typekit code won’t work on other websites, which is as expected, nothing new here.

      However the TinyMCE iframe in the WP Backend has no src url, it’s self contained and the typekit code inside is unaware of the ‘tomjn.com’ part, so the security says no, and no fonts are loaded.

      The workaround is to load a page with working typekit fonts. Now, when you try to load from TinyMCE, it doesn’t bother contacting the server, and goes to the local cache. For me, simply viewing the frontend does the trick.

      Since you’re getting a blank screen I suspect this may be a different error. If this fails it should fallback to the next font. What does your PHP/JS error logs say?

  5. Thank you! I’ve written a slightly different implementation of this script for TinyMCE embedded in Drupal. I can get it to work in Firefox and Chrome, but not in Safari , and also not after having loaded the page. I get 403 errors. Does anyone know why this might be? Can I force Safari to cache the fonts? Thanks!

      • Hi Tom, thanks very much for your reply. I’d be very pleased if I could make this work. The dev site is http://planwerkstadt.janeschindler.ch/dev2/ (your script is in main.js), and I’ve posted the relevant part of the code here: http://janeschindler.ch/test/typekit.html. Does that say anything? I’m not sure I’ve posted all of the relevant information , if not let me know. Obviously in Safari I’m having “referrer” problems , I’m just stumped as to why. Thank you very much for having a look!

          • Hi Tom, I am using the standard code for the frontend, but the backend uses the same theme so I’ve got them both in the same “main” js file (here are screenshots of the backend: broken safari and working chrome: http://janeschindler.ch/test/typekit.html). I can separate the front and backend scripts if they’re causing each other problems, though. Adobe says “Because there is no referrer from the iframe, the Typekit font loading will depend on how the browser handles an empty iframe source. As you found, some browsers use the domain name from the parent page but some send a blank referrer. Unfortunately there isn’t any workaround that I can suggest for Typekit fonts to work consistently across browsers in your iframe. The referer is required for Typekit font loading.” The annoying thing is that I can’t get Safari to just cache the font the way you suggested. It seems like it should work!
            , Thank you.

  6. Hey Tom, noobie here. First, thanks for this excellent work. Quick question, how do I pass the fonts themselves into the add_editor_style( $stylesheet ) function? Cheers, Jules

  7. Pingback: Adding Typekit and dynamic styles to the WordPress editor – Catapult Themes

  8. Pingback: Typekit – Fonts jetzt auch im Backend (editor-style.css) einsetzen | erftnetz.de

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.