Editor Styles and Typekit

3 comments

1. 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!

   Log in to Reply

2. 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:

   js:

   (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
                       };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
                       };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";
                   script.appendChild(doc.createTextNode(jscript));
   
                   // Add the script to the header
                   doc.getElementsByTagName('head')[0].appendChild(script);
   
               });
   
           },
           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);
   })();
   

   PHP

   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;
   }
   

   Log in to Reply

3. 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 = {
                  kitId:'xxxxxx',
                  scriptTimeout:3000
                  };
                  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;
                  clearTimeout(t);
                   try {
                     Typekit.load(config)
                   } catch (b) { } };
                   var s = document.getElementsByTagName("script")[0];
                   s.parentNode.insertBefore(tk, s)
                })();
                </script>
   
      <?php }
   

   Edit:

   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.

   Log in to Reply