How can I use Adobe TypeKit inside Editor?

[Kyle Smith]

My application makes use of Adobe TypeKit for loading custom fonts. I'd like the kendo editor to make use of these fonts so staff that are loading content can see what it will look like. Adobe TypeKit loads fonts/css using javascript (see below for example). Is there anyway for me to load this javascript into the iframe? Or is there anyway for me to get the iframe to be able to use the fonts/css loaded by TypeKit?

<script src="https://use.typekit.net/ID_HERE.js"></script>
<script>try { Typekit.load({ async: true }); } catch (e) { }</script>

 

Thanks!

[Ianko]

Hello Kyle,

You can use the body property and traverse to the head element of the content area to inject the script. 

The iframe, however, you can get with the following line:

var editor = $("#editor").data("kendoEditor");
var editrosIframe = editor.wrapper.find(".k-content");

Regards,
Ianko
Telerik

[Kyle Smith]

I was able to add the script  tags to the head of the iframe's document using the code below. However, it seems as the javascript is never actually executed/loaded.

var editor = $("#editor").data("kendoEditor");
var editorDocument = editor.document;
var scriptElement = editorDocument.createElement("script");
scriptElement.src = "https://use.typekit.net/wgn0wwm.js";
var scriptElement2 = editorDocument.createElement("script");
scriptElement2.text = "try { Typekit.load({ async: true }); } catch (e) { }";
editorDocument.head.appendChild(scriptElement);
editorDocument.head.appendChild(scriptElement2);

[Ianko]

Hello Kyle,

Using this Dojo (http://dojo.telerik.com/iQIfi), I can see that any script injected is loaded. I suggest you to debug the code see what exactly fails.

Regards,
Ianko
Telerik

[Kyle Smith]

Thank you. I've discovered that my code is working, but the second script is being executed immediately. I need it to wait on the first to load. That's not a kendo issue, so this is resolved.

[Kyle Smith]

This is the function I ended up using to insert and load TypeKit into a Kendo Editor:

function loadTypeKitForEditor(editorId) {
    var editor = $("#" + editorId).data("kendoEditor");
    var editorWindow = editor.window;
    var editorDocument = editor.document;

    var scriptElement = editorDocument.createElement("script");
    scriptElement.src = "https://use.typekit.net/typekitid.js";
    scriptElement.async = true;
    scriptElement.onload = function(){
        editorWindow.loadTypeKit();
    };

    var scriptElement2 = editorDocument.createElement("script");
    scriptElement2.text = "function loadTypeKit() { try { Typekit.load({ async: true }); } catch (e) { } }";

    editorDocument.head.appendChild(scriptElement);
    editorDocument.head.appendChild(scriptElement2);
}