How to set default font in CKEditor 4?

Question

I want to set default font family "Arial" in the CKeditor 4. The below changes have been done. But not working.

In config.js,

config.defaultFontLabel = "Arial";

Answer 1

You can create your own css files and put the styles for the editor in there. So create a stylesheet called MyStyle.css and put this in there. Then save it somewhere, perhaps in the same location as the CKEditor files.

body {
    font-family: Arial;
    font-size: 14px;
    color: red;
}

Then put the following line in the config.js and point to the correct path to the css file.

config.contentsCss = '/ckeditor/MyStyle.css';

Or if you want different styles per instance, use this

<textarea id="CKEditor1" class="CKEditor"></textarea>

<script src="/ckeditor/ckeditor.js"></script>
<script>
    $('.CKEditor').each(function () {
        CKEDITOR.replace($(this).prop('id'));

        CKEDITOR.config.contentsCss = '/ckeditor/MyStyle.css';
    });
</script>