Jul 31, 2017
(0 votes)

Using Adobe Typekit in EpiServer

Typekit provides embed code to load fonts


The problem is that you want those same fonts to be present in the TinyMCE editor.

I decided to use a TinyMCE plugin to load the TypeKit.

https://world.episerver.com/documentation/developer-guides/CMS/editing/Customizing-the-TinyMCE-editor/ - Adding a TinyMCE plug-in

I chose the option of creating a Util folder as per


I only needed editor_plugin.js under a folder that I named typekitplugin

I created a class decorated with the TinyMCEPluginNonVisual attribute

[TinyMCEPluginNonVisual(LanguagePath = "/admin/tinymce/plugins/typekitplugin", PlugInName = "typekitplugin")]
public class TinyMCETypeKitPlugin

Once that is done you need to activate it in the editor settings

I.e. Admin - Config - Edit Custom Property Types - XhtmlString > 255 - Plugins without a button

You will find that it is missing a langauge entry which you can fix by adding TinyMCE.xml under Resources/LanguageFiles




<?xml version="1.0" encoding="utf-8" ?>
<language name="English" id="en">
Typekit Plugin



You will need to change "xxxxxxx" to the ID of the TypeKit

Change the GetInfo function as appropriate


(function () {

tinymce.create('tinymce.plugins.typekitplugin', {
* Initializes the plugin, this will be executed after the plugin has been created.
* This call is done before the editor instance has finished it's initialization so use the onInit event
* of the editor instance to intercept that event.
* @param {tinymce.Editor} ed Editor instance that the plugin is initialized in.
* @param {string} url Absolute URL to where the plugin is located.
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 = "(function() {\n\
var config = {\n\
kitId: 'xxxxxxx'\n\
var d = false;\n\
var tk = document.createElement('script');\n\
tk.src = '//use.typekit.net/' + config.kitId + '.js';\n\
tk.type = 'text/javascript';\n\
tk.async = 'true';\n\
tk.onload = tk.onreadystatechange = function() {\n\
var rs = this.readyState;\n\
if (d || rs && rs != 'complete' && rs != 'loaded') return;\n\
d = true;\n\
try { Typekit.load(config); } 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

* Returns information about the plugin as a name/value array.
* The current keys are longname, author, authorurl, infourl and version.
* @return {Object} Name/value array containing information about the plugin.
getInfo: function () {
return {
longname: 'TypeKit plugin for HaurikiPHO',
author: 'Guru Digital',
authorurl: 'http://gurudigital.nz',
infourl: 'http://gurudigital.nz',
version: "1.0"

// Register plugin
tinymce.PluginManager.add('typekitplugin', tinymce.plugins.typekitplugin);

Jul 31, 2017


Paul McGann
Paul McGann Jul 31, 2017 09:42 AM

Nice work Russel, will be definitely using this more often.

Please login to comment.
Latest blogs
Zombie Properties want to Eat Your Brains

It’s a story as old as time. You work hard to build a great site. You have all the right properties – with descriptive names – that the content...

Joe Mayberry | Mar 29, 2023 | Syndicated blog

Optimizely finally releases new and improved list properties!

For years, the Generic PropertyList has been widely used, despite it being unsupported. Today a better option is released!

Tomas Hensrud Gulla | Mar 28, 2023 | Syndicated blog

Official List property support

Introduction Until now users were able to store list properties in three ways: Store simple types (int, string, DateTime, double) as native...

Bartosz Sekula | Mar 28, 2023

New dashboard implemented in CMS UI 12.18.0

As part of the CMS UI 12.18.0 release , a new dashboard has been added as a ‘one stop shop’ to enable editors to access all of their content items,...

Matthew Slim | Mar 28, 2023