How to add fonts to CKEditor?


Im using CKEditor and its working but I want to add some custom fonts but its not working, for example to add the font Monteserrat. With the configuration below the only fonts that appear area: Arial, Comic sans, Courier new, Georgia, Lucida sans unicode, Tahoma, Times new roman, Trebuchet, Verdana. 

Do you know how to properly add new fonts to CKEditor?

"height: 600,
 removeButtons: 'Templates,Source,Save,ExportPdf,Preview,SpecialChar,Flash,Anchor,Language,About,Cut,Undo,Redo,Copy,Paste,Form,Checkbox,Radio,SelectAll,Find,Replace,TextField,Select,Textarea,Button,CreateDiv',

fontFamily: {
            options: [
                'Ubuntu, Arial, sans-serif, Monteserrat',
                'Ubuntu Mono, Courier New, Courier, monospace'

I got it to work with the following method:

To add a new custom font outside of the default ones, you will need to import the font files (.ttf, .woff, etc.) as a Resource to your application:

Make sure you set the Deploy Action option of the font to Deploy to Target Directory:

After this, you will need to create a CSS File that imports the font, in this case it will be named customCKEStyles.css, and it should import the font-face as you would for normally including a new font in your CSS stylesheets, making sure you reference the font files that were uploaded previously (in this case notice the url function points to the Runtime Path property of the font file we added previously.

@font-face {
    font-family: "Montserrat";
    src: url("/CKEditorDemo/Montserrat-Regular.ttf") format("truetype");

Afterwards, add this CSS as a resource to your application too, using the same method as before, making sure to also set the Deploy to Target Directory option:

Afterwards, your Config string should contain a reference to the CSS file by using the contentsCss property (using the Runtime Path property of that resource), and add the font name  as an option for your Config string by adding it as part of your font_names string. Your config assignment expression should include a portion like the following:

contentsCss: '/CKEditorDemo/customCKEStyles.css',

font_names: 'Arial/Arial, Helvetica, sans-serif;' +
            'Times New Roman/Times New Roman, Times, serif;' +
            'Verdana;' +

Remember that you will also need to include the @font-face CSS for any custom fonts in the CSS stylesheet of the webpages where you want to display the text afterwards (and possibly add the CSS file as a resource too).

Great solution, it helped me a lot.

However, in the list of fonts, the space of the names is disappearing and the words are joined. Would you know how to solve this?

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.