How to Load Typekit in the TinyMCE Visual Editor in WordPress

in WordPress by THOMAS GRIFFIN • December 26, 2014 • 5 Comments

Today I’m going to show you how to load TypeKit in the TinyMCE Visual Editor in WordPress. That was a mouthful.

I’ve just recently implemented the editor style feature in my own custom theme for this site, but during the implementation, I quickly realized that I had a problem. I use the Proxima Nova font from TypeKit, and I was having a heck of a hard time trying to figure out how to load TypeKit inside of the TinyMCE Visual Editor.

TinyMCE works by loading the editor area inside of an iframe, which means that the contents inside can’t be manipulated by traditional methods like using the admin_head hook to inject JavaScript onto the plugin. The content needs to be loaded inside of the frame, and in order to make that happen, you have to actually create a TinyMCE plugin to make it work! It was a little annoying, but I was able to make it happen.

The TinyMCE Plugin

You will need to create a TinyMCE plugin, which is essentially a JS file with some self-executing functions that attach to specific TinyMCE events. Since we are likely dealing with editor style here, it makes sense to load this from your theme. In the root of your theme, create a folder called js, and then inside of the folder, create a file called typekit.js. This will be necessary for us to load our TinyMCE plugin to get TypeKit to work inside of the TinyMCE Visual Editor in WordPress.

Load TypeKit in TinyMce Visual Editor in WordPress

Once you have done this, you will need to add the following code inside of the typekit.js file. Take note of the section commented for your TypeKit ID. You will need to replace the code with the ID from your own TypeKit Kit, which can be found in the Kit Settings.

Loading the TinyMCE Plugin

Now that we have created the plugin, we need to load it into the TinyMCE plugins loader so that it can be included when the editor is created. Drop the following code into your theme’s functions.php file.

<?php // Do not include this opening PHP tag. add_filter( 'mce_external_plugins', 'tgm_io_typekit_plugin' ); /** * Adds an external TinyMCE plugin to be loaded into the TinyMCE editor. * * @since 1.0.0 * * @param array $plugins Default array of plugins to be loaded by TinyMCE. * @return array $plugins Amended array of plugins to be loaded by TinyMCE. */ function tgm_io_typekit_plugin( $plugins ) { $plugins['typekit'] = get_stylesheet_directory_uri() . '/js/typekit.js'; return $plugins; }

And there you have it – TypeKit is now loaded into the TinyMCE Visual Editor in WordPress. You can now use your custom TypeKit fonts (like Proxima Nova) inside of your editor-style.css file for customizing the Visual Editor appearance.

Anders_Carlen

Hi, thank you for this tip! Is it possible to also have the code for the actual typekit.js file in any other format then a screenshot? That would be helpful. Thanks!
- griffinjt
  
  Sorry about that – it should be visible again!
  - Anders_Carlen
    
    Perfect. Thanks!
John

Thomas, thank you so much.
Pingback: Use the WordPress Visual Editor to Show Custom Styles()

Inside my WordPress Developer Toolbox

The TinyMCE Plugin

Loading the TinyMCE Plugin