Ability to add external font to editor

[Ben Squire]

As far as I can tell, it is currently not possible to add an external font resource (such as a google font) into the iframe (ckEditor) head element.

In our system we don't have (or want) a font selector and simply want to set the default font to "Noto Sans", in the rest of our app we would include:

<link rel="stylesheet" type="text/css" href="​https://fonts.googleapis.com/css?family=Noto+Sans:400,700,400italic,700italic">

in the head and then reference the "Noto Sans" font in the CSS.

I've tried injecting the link via JS, although the iframe simply refuses to accept the new font:

instance.on('instanceReady', function (e) {

var html = e.editor.document.$; var head = html.getElementsByTagName('head')[0]; var link = document.createElement('link'); link.rel = 'stylesheet'; link.type = 'text/css'; link.href = '​https://fonts.googleapis.com/css?family=Noto+Sans:400,700,400italic,700italic'; head.appendChild(link);

});

A new feature and/or support would be greatly appreciated. Many thanks

Ben

[Jakub Ś]

In case of classic editor, not used in full page mode, you can try adding these fonts to contents.css file:

@import url("https://fonts.googleapis.com/css?family=Noto+Sans:400,700,400italic,700italic");
body
{
	/* Font */
	font-family: "Noto Sans";
...

From what I have checked in Firefox, IE and Chrome, it works as expected.