How can I use Adobe TypeKit inside Editor?

6 posts, 1 answers
  1. Kyle Smith
    Kyle Smith avatar
    42 posts
    Member since:
    Feb 2012

    Posted 14 Apr Link to this post

    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!

  2. Answer
    Ianko
    Admin
    Ianko avatar
    1535 posts

    Posted 15 Apr Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Kyle Smith
    Kyle Smith avatar
    42 posts
    Member since:
    Feb 2012

    Posted 15 Apr in reply to Ianko Link to this post

    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);

  5. Ianko
    Admin
    Ianko avatar
    1535 posts

    Posted 18 Apr Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  6. Kyle Smith
    Kyle Smith avatar
    42 posts
    Member since:
    Feb 2012

    Posted 18 Apr in reply to Ianko Link to this post

    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.

  7. Kyle Smith
    Kyle Smith avatar
    42 posts
    Member since:
    Feb 2012

    Posted 18 Apr Link to this post

    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);
    }

Back to Top
UI for ASP.NET MVC is VS 2017 Ready