Opened 4 years ago

Closed 3 years ago

#13762 closed New Feature (invalid)

Ability to add external font to editor

Reported by: Ben Squire Owned by:
Priority: Normal Milestone:
Component: General Version: 4.5.3
Keywords: Cc:

Description

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

Change History (1)

comment:1 Changed 3 years ago by Jakub Ś

Resolution: invalid
Status: newclosed

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.

Note: See TracTickets for help on using tickets.
© 2003 – 2019 CKSource – Frederico Knabben. All rights reserved. | Terms of use | Privacy policy