11

I am trying to add a custom font but can't. I am getting error with below code, The font name is adding in the drop down but it's not changing...

my code is

config.js:

CKEDITOR.editorConfig = function( config )
{
config.contentsCss = 'fonts.css';
config.font_names = 'Dekers/dekers_true' + config.font_names;
}

fonts.css:

@font-face {  
font-family: "dekers_true", serif;
src: url(fonts/Dekers_light.eot ); /* IE */  
src: local("Dekers"), url("fonts/Dekers_light.ttf") format("truetype"); /*non-IE*/  
}
1
  • why Dekers/ needs to added, is it necessary to wrote src: local("Dekers"), ? Mar 31, 2020 at 10:13

3 Answers 3

9

Your custom CSS file must contain the basic styling for CKEditor body. CKEditor loads in the iframe with this CSS file only.

@font-face {  
    font-family: "dekers_true"; /* font name for the feature use*/
    src: url(fonts/Dekers_light.eot ); /* IE */  
    src: local("Dekers"), url("fonts/Dekers_light.ttf") format("truetype"); /*non-IE*/  
}
body {
    font: normal 13px/1.2em dekers_true, serif;
    color: #333;
}
p {
    font: normal 13px/1.2em dekers_true, serif;
    margin-top: 0;
    margin-bottom: 0.5em
}
...

And than add font declaration into your main site's CSS file too.

Upd: Alternative variant. You can declare your custom styles, e.g.

config.stylesSet = [
    { name : 'Pretty font face', element : 'span', attributes : { 'class' : 'pretty_face' } },
    ... 
];

So will be applied class .pretty_face and than you can style it as you wish. If you want immediate preview in rte, you need to style this class in contentsCSS file too.

3
  • Thanks a lot for your quick reply. where i declare the custom styles, i tried in ckeditor\plugins\styles\styles\default.js but not getting the style in dropdown, can you give the small code for just add a font face and size in js. Please am new in ckeditor. strucking with bugs...Help me
    – Sarwan
    Sep 14, 2011 at 14:41
  • Please read more about custom styles here
    – atma
    Sep 14, 2011 at 14:49
  • Note: never change the core code as ckeditor\plugins\styles\styles\default.js, CKEditor config is very flexible. Also CKEditor has jQuery adapter, so you can call callback function after the editor will load.
    – atma
    Sep 14, 2011 at 15:06
6

OR in config.js

config.font_names = 'Arial/Arial, Helvetica, sans-serif;' +
    'Comic Sans MS/Comic Sans MS, cursive;' +
    'Courier New/Courier New, Courier, monospace;' +
    'Georgia/Georgia, serif;' +
    'Lucida Sans Unicode/Lucida Sans Unicode, Lucida Grande, sans-serif;' +
    'Tahoma/Tahoma, Geneva, sans-serif;' +
    'Times New Roman/Times New Roman, Times, serif;' +
    'Trebuchet MS/Trebuchet MS, Helvetica, sans-serif;' +
    'Verdana/Verdana, Geneva, sans-serif;' + 
    **'Dekers/dekers_true';**

And then your CSS. The above places it in Styles dropdown, not Fonts.

1
  • Awesome! This works for me. I added in my main css and ckeditor contents.css the font-face rule of my fonts, and it works like a charm! Feb 19, 2015 at 13:06
0

If you're using hosted fonts and have a relatively simple use case, you can just add the stylesheets directly to config.contentCss:

config.contentsCss = [ '/css/mysitestyles.css', 'https://fonts.googleapis.com/css?family=Roboto' ]

Where the first file defines your styles (e.g. .title { font-family: 'Roboto', sans-serif;) and the second one is the remote stylesheet containing the font definitions.

The custom fonts should now appear in the drop-down menu and editor, providing you have defined the selectable styles in config.styleSet:

config.styleSet = [ { 'name': 'Title', 'element': 'h1', 'attributes': { 'class': 'title' } ]

I tested this using the CKEditor Django plugin, where the syntax is a little different to the above, but I can't see any reason why it wouldn't translate.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.