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:
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:
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:
Add the .eot and .ttf files as resources
Edit the config.js and add the new font
config.font_names = 'Source Serif Pro Bold/SourceSerifPro-Bold;' + config.font_names;
Edit the fonts.css and add a new @font-face rule
src: url(/ckeditor/Customfonts/SourceSerifPro-Bold.eot); /* IE */
src: local("SourceSerifPro-Bold"), url("/ckeditor/Customfonts/SourceSerifPro-Bold.ttf") format("truetype"); /*non-IE*/
Do the same thing in your application CSS Theme
You can find an example in: https://vascosantos.outsystemscloud.com/CKEditor_Example/HomePage.aspx