Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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.

share|improve this question
    
suggest this is migrated to stackoverflow - it's not really a WP issue. –  anu Aug 15 '12 at 15:02
    
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 Aug 15 '12 at 15:03

3 Answers 3

up vote 1 down vote accepted

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!

share|improve this answer
    
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 Sep 10 '12 at 9:09
    
Well huzzah it does!! =] –  Tom J Nowell Sep 10 '12 at 9:50
    
Could you modify your answer with the updated version of my code just for completeness? –  Tom J Nowell Sep 10 '12 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 Sep 10 '12 at 10:37
    
I'll update my answer to link to your blog post. You did the heavy lifting here! –  Chris Van Patten Sep 21 '12 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:

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;
}
share|improve this answer
    
This totally worked for me. It requires a little bit of work and patience but it works really well! –  racl101 Sep 14 '12 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 = {
               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.

share|improve this answer
    
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 Jul 25 '12 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 Aug 15 '12 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 Aug 15 '12 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 Sep 22 '12 at 3:54

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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