New to Kendo UI for jQuery? Download free 30-day trial

Add Google WebFonts to the Editor


Product Progress® Kendo UI® Editor for jQuery
Operating System Windows 10 64bit
Visual Studio Version Visual Studio 2017
Preferred Language JavaScript


How can I include Google Web Fonts to the Kendo UI for jQuery Editor?


The following example demonstrates how to achieve the desired scenario.

<textarea id="editor" rows="10" cols="30" style="width:740px;height:440px">
            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>Features include:</p>
            <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>
            Read <a href="">more details</a> or send us your
            <a href="">feedback</a>!
        // Add Google Web Fonts to the font name drop-down.
        var editor = $("#editor").kendoEditor({
      tools: ["fontName"],
          fontName: [].concat(
            // The default fonts.
            // The value has to contain a list of fonts including a 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 the editing area.
            .append("<link href='' rel='stylesheet'>")
            .append("<link href='' rel='stylesheet' type='text/css'>")
            .append("<link href='' rel='stylesheet' type='text/css'>")
            .append("<link href='' rel='stylesheet' type='text/css'>");

See Also

In this article