How to set default font and font size in CKEditor 4

Question

I have use the following code to set default font and font size in CKEditor 4:

config.font_defaultLabel = 'Tahoma';
config.fontSize_defaultLabel = '24px';

But above code is not working on Mozilla Firefox.

Hesler

To change the default display font and the actual html that is saved see https://mcmap.net/q/1076512/-is-there-a-way-to-set-the-default-font-and-font-size-in-ckeditor – Demers

Answer 1

I changed the font-size and font-family using below,

CKEDITOR.addCss(".cke_editable{cursor:text; font-size: 14px; font-family: Arial, sans-serif;}");

Interferometer

Works well with v4.11 – Sectionalize

Answer 2

This is a complicated issue. Those settings only set the label in dropdown meaning if there will be a font which doesn't match any defined in font dropdown or there will be no font defined then Tahoma will be shown in the dropdown (there doesn't have to be a match). Labels don't force particular font in the editor.

If you want to have Tahoma as default font, you need to set it in CSS. For classic editor you need to set it in ckeditor/contents.css for body element. For inline editor, you need to set it in main page CSS file.

NOTE: There are ways to force particular fixed set of fonts inside the editor (even when pasting different fonts from external resources) but they require usage of Advanced Content Filter (ACF) and transformations. If you wish to learn more about ACF please see below links:

• https://docs.ckeditor.com/ckeditor4/latest/guide/dev_acf.html
• https://docs.ckeditor.com/ckeditor4/latest/guide/dev_advanced_content_filter.html
• https://ckeditor.com/docs/ckeditor4/latest/guide/dev_disallowed_content.html
• https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_config.html#cfg-allowedContent
• https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_config.html#cfg-extraAllowedContent
• https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_config.html#cfg-disallowedContent
• https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_filter.html#method-addTransformations

Basically, with addTransformations method, you can check all the spans and see if the font used for it is on the list of defined fonts or not. If it is not, you can either delete it or apply default Tahoma font. Please also note that ACF can't be disabled if you want to use transforrmations.

Songful