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
Optimizely SendGrid SMTP host is deprecated

SendGrid is a services for sending email that is included in Optimizely DXP. Previously smtp.episerver.net was the recommended SMTP server to use,...

Tomas Hensrud Gulla | Dec 4, 2022 | Syndicated blog

Hosting Optimizely CMS 12 on Docker Engine

Since Optimizely CMS can now be deployed as a Docker container, here is a demonstration of building, running and scaling an Optimizely CMS 12 site ...

Stefan Holm Olsen | Dec 4, 2022 | Syndicated blog

How to use CacheTagHelper with content areas in Optimizely CMS 12

I might be going out on a limb here - if you have a better solution, feel very free to share it!  Upgrading your Optimizely web application from .N...

Andreas J | Dec 2, 2022

The 1001st Piece in your 1000 Piece Puzzle: .NET Default Interface Functions

I was recently working with a client who wanted a reasonably large subsystem added to Optimizely that would add automated management to their...

Greg J | Nov 28, 2022 | Syndicated blog

Video Demonstration, creating a CMS12 Alloy Sample Site

Hey All Below you will find a quick video demonstration on how to install a local version of Alloy Sample based on CMS12 / .Net 6. As you will see ...

Minesh Shah (Netcel) | Nov 28, 2022

How to create an admin user I Optimizely CMS – with Episerver CLI

In this blog post I’ll show how to create an admin user for Optimizely CMS in a new environment where you don’t have access to the admin interface.

Ove Lartelius | Nov 28, 2022 | Syndicated blog