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:

https://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:

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

}

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;

};

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:

Your application is now ready to render the custom font:

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;

};
 

3. 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*/  

}
 

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