Edit this page

Add Google WebFonts to the Editor

The following example demonstrates how to include Google Web Fonts to the Kendo UI Editor.

Example
<textarea id="editor" rows="10" cols="30" style="width:740px;height:440px">
        <p>
            Kendo UI Editor allows your users to edit HTML in a familiar, user-friendly way.<br />
            In this version, the Editor provides the core HTML editing engine, which includes basic text formatting, hyperlinks, lists,
            and image handling. The widget <strong>outputs identical HTML</strong> across all major browsers, follows
            accessibility standards and provides API for content manipulation.
        </p>
        <p>Features include:</p>
        <ul>
            <li>Text formatting &amp; alignment</li>
            <li>Bulleted and numbered lists</li>
            <li>Hyperlink and image dialogs</li>
            <li>Cross-browser support</li>
            <li>Identical HTML output across browsers</li>
            <li>Gracefully degrades to a <code>textarea</code> when JavaScript is turned off</li>
        </ul>
        <p>
            Read <a href="http://docs.kendoui.com">more details</a> or send us your
            <a href="http://www.kendoui.com/forums.aspx">feedback</a>!
        </p>
    </textarea>
    <script>
        // Add Google Web Fonts to font name drop-down
        var editor = $("#editor").kendoEditor({
      tools: ["fontName"],
          fontName: [].concat(
            // default fonts
            kendo.ui.Editor.fn.options.fontName,
            // value should contain list of fonts, including fallback
            [{text: "Fjalla One", value: "'Fjalla One',sans-serif" },
             {text: "Griffy", value: "'Griffy',cursive" },
             {text: "Jacques Francois Shadow", value: "'Jacques Francois Shadow',cursive" },
             {text: "Fascinate", value: "'Fascinate',cursive" }
             //...
            ]
          )
        });

        // Load Google Web Font in editing area
        $(editor.data("kendoEditor").body)
          .prevAll("head")
            .append("<link href='http://fonts.googleapis.com/css?family=Fjalla+One' rel='stylesheet'>")
            .append("<link href='http://fonts.googleapis.com/css?family=Griffy' rel='stylesheet' type='text/css'>")
            .append("<link href='http://fonts.googleapis.com/css?family=Jacques+Francois+Shadow' rel='stylesheet' type='text/css'>")
            .append("<link href='http://fonts.googleapis.com/css?family=Fascinate' rel='stylesheet' type='text/css'>");
    </script>

See Also

For more runnable examples on the Kendo UI Editor, browse its How To documentation folder.

Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article

close
Dummy