[CKEditor] [How To] Add Custom fonts on CKEditor

[CKEditor] [How To] Add Custom fonts on CKEditor

  
Forge Component
(11)
Published on 12 Oct by OutSystems Labs
11 votes
Published on 12 Oct by OutSystems Labs

 

Some time ago a customer asked us if it was possible to use a custom font on the CKEditor.
I did some research and I found out It was possible.


Since I’ve haven’t found nothing similar in our Community, I created this tutorial so that you don’t need to suffer like I did.


1st Step – Get you custom font into the server


First of all, you’ll need to get the files of your font, e.g., I used this one – Source Sans Pro Regular:

http://store1.adobe.com/cfusion/store/html/index.cfm?event=displayFont&code=SOUP10005050


Just add the .ttf and .eot files as a resource of the eSpace CKEditor:


C:\Users\vms\Desktop\CKEditor\Capture0.PNG


2nd Step – Add CSS rule to use the new font


For you to see the text in the editor rendered with the selected font, you’ll need to add a ‘font.css’ file as a resource of the eSpace CKEditor with the following rule:


@font-face {  

   font-family: "SourceSansPro-Regular";  

   src: url(/ckeditor/Customfonts/SourceSansPro-Regular.eot); /* IE */  

   src: local("SourceSansPro-Regular"), url("/ckeditor/Customfonts/SourceSansPro-Regular.ttf") format("truetype"); /*non-IE*/  

}


 C:\Users\vms\Desktop\CKEditor\Capture1.PNG


To add the new font to the font dropdown, you’ll need to change the resource ‘.\ckeditor\config.js’:


CKEDITOR.editorConfig = function( config )

{

// Define changes to default configuration here:

config.contentsCss = '/CKEditor/CustomFonts/fonts.css';

//the next line add the new font to the combobox in CKEditor

//config.font_names = '<Cutsom Font Name>/<YourFontName>;' + config.font_names;

config.font_names = 'Source Sans Pro Regular/SourceSansPro-Regular;' + config.font_names;

};


C:\Users\vms\Desktop\CKEditor\Capture2.PNG


Then, publish your CKEditor eSpace and call the CKEditor WebBlock to the selected input.


You’ll have something similar to this:



3rd Step – Make your website render the custom font


If you noticed on the previous screenshot, the text bellow the button it’s not rendering with the custom font selected.

You’ll also have to define the @font-face in your application Theme:


C:\Users\vms\Desktop\CKEditor\Capture4.PNG


Your application is now ready to render the custom font:

C:\Users\vms\Desktop\CKEditor\Capture5.PNG


NOTE: Make sure you clear your browser cache.



4th – Having more than one custom font


If you need to add more custom fonts, you just repeat the previous steps:

  1. Add the .eot and .ttf files as resources

  2. Edit the config.js and add the new font

CKEDITOR.editorConfig = function( config )

{

config.contentsCss = '/CKEditor/CustomFonts/fonts.css';

config.font_names = 'Source Sans Pro Regular/SourceSansPro-Regular;' + config.font_names;

config.font_names = 'Source Serif Pro Bold/SourceSerifPro-Bold;' + config.font_names;

};
 

  1. Edit the fonts.css and add a new @font-face rule

@font-face {  

   font-family: "SourceSansPro-Regular";  

   src: url(/ckeditor/Customfonts/SourceSansPro-Regular.eot); /* IE */  

   src: local("SourceSansPro-Regular"), url("/ckeditor/Customfonts/SourceSansPro-Regular.ttf") format("truetype"); /*non-IE*/  

}

@font-face {  

   font-family: "SourceSerifPro-Bold";  

   src: url(/ckeditor/Customfonts/SourceSerifPro-Bold.eot); /* IE */  

   src: local("SourceSerifPro-Bold"), url("/ckeditor/Customfonts/SourceSerifPro-Bold.ttf") format("truetype"); /*non-IE*/  

}
 

  1. Do the same thing in your application CSS Theme


NOTE: Make sure you clear your browser cache.


You can find an example in: https://vascosantos.outsystemscloud.com/CKEditor_Example/HomePage.aspx



UPDATE - automatically invalidate CKEditor cache
-------------------------------------------------------------------

One thing I've struggled after implemented the new font was the fact that I had to manually refresh the browser cache in order to call the most recent version of the config.js file.

Since this is not a good solution, I've searched for possible solutions to automatically make the CKEditor call the most recent version of the files.

In fact, CKEditor itself provides this feature. You just have to open the eSpace CKEditor, go to WebBlock CKEditor and edit the expression <CKEditor configurations> by adding this: 
CKEDITOR.timestamp='<your value>';
In my case I used the CurrDateTime without the special characters, e.g., 10112014102630

CKEDITOR.timestamp='"+Replace(Replace(Replace(Replace(Replace(Replace(CurrDateTime()," ",""),"/",""),"\",""),"-",""),":",""),".","")+"';

Do you have an example of a new Style?. Is there a way to do it using the config input parameter of the webblock? or it is only possible editing CKEditor webblock application and compiling it.