Custom Font in ckeditor

I am trying to add a custom font but can't. I am getting error with below code, The font name is adding in the drop down but it's not changing...

my code is

config.js:

CKEDITOR.editorConfig = function( config )
{
config.contentsCss = 'fonts.css';
config.font_names = 'Dekers/开发者_JS百科dekers_true' + config.font_names;
}

fonts.css:

@font-face {  
font-family: "dekers_true", serif;
src: url(fonts/Dekers_light.eot ); /* IE */  
src: local("Dekers"), url("fonts/Dekers_light.ttf") format("truetype"); /*non-IE*/  
}

Your custom CSS file must contain the basic styling for CKEditor body. CKEditor loads in the iframe with this CSS file only.

@font-face {  
    font-family: "dekers_true"; /* font name for the feature use*/
    src: url(fonts/Dekers_light.eot ); /* IE */  
    src: local("Dekers"), url("fonts/Dekers_light.ttf") format("truetype"); /*non-IE*/  
}
body {
    font: normal 13px/1.2em dekers_true, serif;
    color: #333;
}
p {
    font: normal 13px/1.2em dekers_true, serif;
    margin-top: 0;
    margin-bottom: 0.5em
}
...

And than add font declaration into your main site's CSS file too.

Upd: Alternative variant. You can declare your custom styles, e.g.

config.stylesSet = [
    { name : 'Pretty font face', element : 'span', attributes : { 'class' : 'pretty_face' } },
    ... 
];

So will be applied class .pretty_face and than you can style it as you wish. If you want immediate preview in rte, you need to style this class in contentsCSS file too.

OR in config.js

config.font_names = 'Arial/Arial, Helvetica, sans-serif;' +
    'Comic Sans MS/Comic Sans MS, cursive;' +
    'Courier New/Courier New, Courier, monospace;' +
    'Georgia/Georgia, serif;' +
    'Lucida Sans Unicode/Lucida Sans Unicode, Lucida Grande, sans-serif;' +
    'Tahoma/Tahoma, Geneva, sans-serif;' +
    'Times New Roman/Times New Roman, Times, serif;' +
    'Trebuchet MS/Trebuchet MS, Helvetica, sans-serif;' +
    'Verdana/Verdana, Geneva, sans-serif;' + 
    **'Dekers/dekers_true';**

And then your CSS. The above places it in Styles dropdown, not Fonts.

If you're using hosted fonts and have a relatively simple use case, you can just add the stylesheets directly to config.contentCss:

config.contentsCss = [ '/css/mysitestyles.css', 'https://fonts.googleapis.com/css?family=Roboto' ]

Where the first file defines your styles (e.g. .title { font-family: 'Roboto', sans-serif;) and the second one is the remote stylesheet containing the font definitions.

The custom fonts should now appear in the drop-down menu and editor, providing you have defined the selectable styles in config.styleSet:

config.styleSet = [ { 'name': 'Title', 'element': 'h1', 'attributes': { 'class': 'title' } ]

I tested this using the CKEditor Django plugin, where the syntax is a little different to the above, but I can't see any reason why it wouldn't translate.