Adding @Font-Face to Ckeditor

adding @font-face to CKEditor

add the following line to ckeditor/config.js

config.contentsCss = 'fonts.css';
//the next line add the new font to the combobox in CKEditor
config.font_names = 'fontnametodisplay/yourfontname;' + config.font_names;

where fonts.css has the @font-face attribute:

@font-face {  
    font-family: "yourfontname";  
    src: url( ../fonts/font.eot ); /* IE */  
    src: local("realfontname"), url("../fonts/font.TTF") format("truetype"); /*non-IE*/  
}

Adding a font in CKEditor

You should not modify source files to change editor configuration. Please refer to the Setting Configuration article to choose the configuration method that is best suited to your needs.

Remember to clear your browser cache after introducing any JavaScript/CSS changes!

Custom Font in ckeditor

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.

---

Related Topics