New to Kendo UI for jQueryStart a free 30-day trial

Add Google WebFonts to the Editor

Environment

ProductProgress® Kendo UI® Editor for jQuery
Operating SystemWindows 10 64bit
Visual Studio VersionVisual Studio 2017
Preferred LanguageJavaScript

Description

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

Solution

The following example demonstrates how to achieve the desired scenario.

<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="https://docs.telerik.com/kendo-ui/introduction">more details</a> or send us your
			<a href="https://www.telerik.com/kendo-ui/forums.aspx">feedback</a>!
		</p>
    </textarea>
	<script>
		// Add Google Web Fonts to the font name drop-down.
		var editor = $("#editor").kendoEditor({
      tools: ["fontName"],
		  fontName: [].concat(
			// The default fonts.
			kendo.ui.Editor.fn.options.fontName,
			// 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.
		$(editor.data("kendoEditor").body)
		  .prevAll("head")
			.append("<link href='https://fonts.googleapis.com/css?family=Fjalla+One' rel='stylesheet'>")
			.append("<link href='https://fonts.googleapis.com/css?family=Griffy' rel='stylesheet' type='text/css'>")
			.append("<link href='https://fonts.googleapis.com/css?family=Jacques+Francois+Shadow' rel='stylesheet' type='text/css'>")
			.append("<link href='https://fonts.googleapis.com/css?family=Fascinate' rel='stylesheet' type='text/css'>");
	</script>

See Also