First create your custom style definitions; you can use existing CSS which is linked to the master page or create new CSS file. Sample CSS:
.custom-rteStyle-Heading1
{-ms-name:"Custom Defined 1";
color:#FF0000;
font-size:30px;
font-family:"Gill Sans MT";
font-weight:bold;}
.custom-rteStyle-Heading2
{-ms-name:"Custom Defined 2";
color:#000000;
font-size:24px;
font-family:"Gill Sans MT";
font-weight:bold;}
Ensure that instances of content editor web part are set to use above style definition.
To do that, you can use below JavaScript in your masterpage or in script editor web part (if you want to run a quick test). Obviously if you want content editor web parts anywhere on the site inherit this style - use the script in the masterpage.
Below, also make sure you have a proper name for jQuery reference and CSS file which has your style definitions (my CSS reference is \_layouts\15\MyProject1\Styles.css, so make sure you use your own whether it's in the library or _layouts folder).
Add below code in Master Page.
< script src="http://code.jquery.com/jquery-1.10.2.min.js" type="text/javascript"></script>
< script type="text/javascript">
ExecuteOrDelayUntilScriptLoaded(function() {
$("div[RteRedirect]").each(function() {
var id = $(this).attr("RteRedirect"),
editSettings = $("#" + id);
if(editSettings.length > 0 && editSettings[0].PrefixStyleSheet != 'custom-rte')
{
editSettings[0]['PrefixStyleSheet'] = 'custom-rte';
editSettings[0]['StyleSheet'] = '\u002f_layouts\u002f15\u002fMyProject1\u002fStyles.css';
RTE.Canvas.fixRegion(id, false);
}
});
}, "sp.ribbon.js");
< /script>
