Search code examples
ckeditor

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/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*/  
}
Solution

  • 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.