adding @font-face to CKEditor

Question

I would like to add a font to the CKEditor font combo box. This in itself is easy enough. However the font I would like to add is a custom font that I use with the @font-face CSS3 attribute. I managed to do that but the editor itself does not show the custom font. If I just take the html created by CKEditor and show it in a div on the page, the custom font show nicely. I would also like to somehow add the @font-face attribute to the text area of CKEditor, so my users can see the custom font as they type.

Is this possible?

Solution

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

Comments

[Wiktor Walc]

A note to anyone that is using "framed editor": content.css contains some really useful default styles for the editing area, so you may rather want to keep it: config.contentsCss = [ CKEDITOR.getUrl('contents.css'), '/path/to/fonts.css' ];