Sunday, July 31, 2016

How to display new fonts in CK Editor?

You may want to support different fonts in different language in Ck Editor. This is how I have done that for one of my recent website.

1. First of all I have downloaded the font to be used in my CKEditor.
2. Then I have created css file named font.css with following content in it. URL refers to the font file name from website home. Font family is used to display the font in font dropdown.

@font-face {
   font-family: "Tamil";
   src: url(/exam/assets/js/ckeditor/fonts/tamil.ttf); /* IE */
   src: local("Tamil/Tamil"), url("/exam/assets/js/ckeditor/fonts/tamil.ttf") format("truetype"); /*non-IE*/
}

3. After that I have modified the config.js file in the CKEditor folder with following changes.
CKEDITOR.editorConfig = function( config ) {
//Exiting code goes here
//..........................
//my code is as follow below existing code
config.contentsCss = '/exam/assets/js/ckeditor/fonts/fonts.css';
config.font_names = 'Tamil/Tamil;' + config.font_names;
}
Here the first line the reference to the css file I created and second line is append the new font with the font list.

Hope this works for you if not please put a comment.

No comments:

Post a Comment