Adding custom style in Ckeditor 5

Edit the CkEditor css file in its entirety, that can be found at This guide

From the page:

By default, content styles are loaded by the editor JavaScript which makes them only present when users edit their content and this, in turn, usually takes place in the back–end of an application. If you want to use the same styles in the front–end, you may find yourself in a situation that requires you to load CKEditor just for that purpose, which is (performance–wise) not the best idea.

To avoid unnecessary dependencies in your front–end, use a stylesheet with a complete list of CKEditor 5 content styles used by all editor features. There are two ways to obtain it:

By taking it directly from this guide and saving it as a static resource in your application (e.g. content-styles.css) (recommended). By generating it using a dedicated script. Learn more in the Development environment guide. Load the content-styles.css file in your application by adding the following code to the template: