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