Skip to content Skip to sidebar Skip to footer
Home / Ckeditor / Javascript / Jquery / Plugins

Setting Font-size And Font-family In Ckeditor

Post a Comment
I am working with ckeditor I want to ask how can we set the font-family and font-size in this plugin, I have tried using CKEDITOR.config.font_defaultLabel = 'Arial'; CKEDITOR.conf

Solution 1:

The most future-proof method(1) is to override the default CSS styles for CKEditor content that you want to change in a separate file, added to your editor configuration through the config.contentsCss option.

See the working sample for this scenario in the CKEditor SDK: http://sdk.ckeditor.com/samples/classic.html

Scroll down to the "Classic Editor with Custom Styles" sample there; you can download the exact source code of this solution in the "Get Sample Source Code" section on the sample page. In this case the custom font and other styles were defined in a separate classic.css file which is then provided to the editor instance configuration with:

<script>CKEDITOR.replace( 'myeditor', {
        /* Default CKEditor styles are included as well to avoid copying default styles. */contentsCss: [ 'contents.css', 'classic.css' ]
    } );
</script>

Do remember that it is only valid for classic editor as in inline editor content styles are the same as the page styles, so all content styling comes directly from the page stylesheets.

(1) This method is better than modifying the default contents.css file because you don't risk overwriting your changes when you upgrade CKEditor.

Solution 2:

If you are using the classic editor, check the contents.css file in the root folder of CKEditor. You can change the styles, including fonts, for all HTML elements, also for the <body> element (the editing area).

Instead of modyfying the default config.css you may specify additional CSS files to be loaded with config.contentsCss, this will save you a headache with future upgrades. See Anna's comment.

Post a Comment for "Setting Font-size And Font-family In Ckeditor"