My website uses typekit to grab custom fonts, which works on the frontend.

I'd like to put this in my editor styles in the backend. However, I don't know how I would do this. Typekit uses a js embed snippet rather than a css font-face embed snippet.

  • suggest this is migrated to stackoverflow - it's not really a WP issue.
    – anu
    Commented Aug 15, 2012 at 15:02
  • 2
    It IS because I know how to do typekit in the general case. What I'm trying to do is put it into the WordPress editor. If it's moved over to Stack Overflow there'll just be a load of people going "hmmm but this is a WordPress question =s"
    – Tom J Nowell
    Commented Aug 15, 2012 at 15:03

3 Answers 3


Tom Nowell's TinyMCE plugin solution works brilliantly, just update the JavaScript to use Typekit's new async code. Once you use the new async embed code, the 403 problem disappears and you'll have Typekit-enabled TinyMCE with no fuss!

Tom has put all the code together in a blog post. He did all the heavy lifting on this, so go give him some pageviews and read the specifics there!

  • It does? ( I both asked and answered =p ) my solution would work if it weren't for the security, if I could set the src of the iframe to a blank page on the same domain it would work, I shall test the new async code though!
    – Tom J Nowell
    Commented Sep 10, 2012 at 9:09
  • Well huzzah it does!! =]
    – Tom J Nowell
    Commented Sep 10, 2012 at 9:50
  • Could you modify your answer with the updated version of my code just for completeness?
    – Tom J Nowell
    Commented Sep 10, 2012 at 9:51
  • I've written a blogpost here: tomjn.com/150/typekit-wp-editor-styles with the code in gists, do you have a twitter account I can credit you with for figuring out the async bit?
    – Tom J Nowell
    Commented Sep 10, 2012 at 10:37
  • I'll update my answer to link to your blog post. You did the heavy lifting here! Commented Sep 21, 2012 at 23:39

I got around this by adding a tinymce plugin, it's almost there but Im getting a 403 forbidden when it tries to retrieve the font css from typekit:


(function() {
    tinymce.create('tinymce.plugins.typekit', {
        init: function(ed, url) {
            ed.onPreInit.add(function(ed) {

                // Get the DOM document object for the IFRAME
                var doc = ed.getDoc();

                // Create the script we will add to the header asynchronously
                var jscript = "var TypekitConfig = {\n\
                    kitId: '*******'\n\
                    (function() {\n\
                    var tk = document.createElement('script');\n\
                    tk.src = '//use.typekit.com/' + TypekitConfig.kitId + '.js';\n\
                    tk.type = 'text/javascript';\n\
                    tk.async = 'true';\n\
                    tk.onload = tk.onreadystatechange = function() {\n\
                    var rs = this.readyState;\n\
                    if (rs && rs != 'complete' && rs != 'loaded') return;\n\
                    try { Typekit.load(TypekitConfig); } catch (e) {}\n\
                    var s = document.getElementsByTagName('script')[0];\n\
                    s.parentNode.insertBefore(tk, s);\n\

                // Create a script element and insert the TypeKit code into it
                var script = doc.createElement("script");
                script.type = "text/javascript";

                // Add the script to the header


        getInfo: function() {
            return {
                longname: 'TypeKit For TinyMCE',
                author: 'Tom J Nowell',
                authorurl: 'http://tomjn.com/',
                infourl: 'http://twitter.com/tarendai',
                version: "1.0"
    tinymce.PluginManager.add('typekit', tinymce.plugins.typekit);


add_filter("mce_external_plugins", "tomjn_mce_external_plugins");
function tomjn_mce_external_plugins($plugin_array){
    $plugin_array['typekit']  =  get_template_directory_uri().'/typekit.tinymce.js';
    return $plugin_array;
  • This totally worked for me. It requires a little bit of work and patience but it works really well!
    – racl101
    Commented Sep 14, 2012 at 21:09

You can enqueue the script for admin then it should be available for your editor.css

    add_action( 'admin_print_scripts', 'admin_typekit' );
    function admin_typekit( ) {
         global $pagenow;
         $arg = array( 'post.php', 'post-new.php', 'page-new.php', 'page.php' );
         if ( ! in_array( $pagenow, $arg ))
                return; ?>

          <script type="text/javascript">
              (function () {
                 var config = {
               var h = document.getElementsByTagName("html")[0];
               h.className += " wf-loading";
               var t = setTimeout(function () {
               h.className = h.className.replace(/( |^)wf-loading( |$)/g, "");
               h.className += " wf-inactive"
               }, config.scriptTimeout);
               var tk = document.createElement("script");
               tk.src = '//use.typekit.net/' + config.kitId + '.js';
               tk.type = "text/javascript";
               tk.async = "true";
               tk.onload = tk.onreadystatechange = function () {
           var a = this.readyState;
            if (a && a != "complete" && a != "loaded")return;
                try {
                } catch (b) { } };
                var s = document.getElementsByTagName("script")[0];
                s.parentNode.insertBefore(tk, s)

   <?php }


Updated the code above for typekit since it requires some inline js like you mentioned. We also have to change the $hook variable to $pagenow since were not using admin_enqueue_scripts.

  • Isn't as simple as that, it's inline script, but if adding it in the admin is enough for the css to pick it up then it should work =]
    – Tom J Nowell
    Commented Jul 25, 2012 at 16:44
  • This doesn't actually work. Aside from a missing semicolon and a closing bracket, once fixed it adds the font to the post edit screen, I can change the WordPress UI, but I cannot use the font in the editor styles. My post content refuses to use the typekit fonts and instead displays in whatever the next fallback fonts are available.
    – Tom J Nowell
    Commented Aug 15, 2012 at 11:25
  • The JS itself it would appear needs inserting into the iframe tinyMCE uses, not the parent frame that loads the WordPress post UI
    – Tom J Nowell
    Commented Aug 15, 2012 at 11:25
  • I was able to fix the problem of the CSS file being forbidden by copying the css into my editor-style.css. Its a super hackish fix but it worked, after I had tried just about everything else.
    – Cole
    Commented Sep 22, 2012 at 3:54

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.