How to change font in CKEditor4?
Permalink
Hello everybody! I have 5.8 version with CKEditor4.
There are followind default fonts in a dropdown of CKEditor:
Arial
Comic Sans Ms
Courier New
Georgia
Lucida Sans Unicode
Tahoma
Times New Roman
Trebuchet MS
Verdana
I want to install some new font. For example, Roboto.
I go to file www\concrete\js\ckeditor4\vendor\contents.css
I open the file and see:
body
{
/* Font */
font-family: sans-serif, Arial, Verdana, "Trebuchet MS";
font-size: 12px;
/* Text color */
color: #333;
/* Remove the background color to make it transparent */
background-color: #fff;
margin: 20px;
}
and other snippet where fonts are mentioned:
==================================
}
blockquote
{
font-style: italic;
font-family: Georgia, Times, "Times New Roman", serif;
padding: 2px 0;
border-style: solid;
border-color: #ccc;
border-width: 0;
}
where should i go and to where should i add new font, for example Roboto, if I want a new font in a dropdown in CKEditor?
There are followind default fonts in a dropdown of CKEditor:
Arial
Comic Sans Ms
Courier New
Georgia
Lucida Sans Unicode
Tahoma
Times New Roman
Trebuchet MS
Verdana
I want to install some new font. For example, Roboto.
I go to file www\concrete\js\ckeditor4\vendor\contents.css
I open the file and see:
body
{
/* Font */
font-family: sans-serif, Arial, Verdana, "Trebuchet MS";
font-size: 12px;
/* Text color */
color: #333;
/* Remove the background color to make it transparent */
background-color: #fff;
margin: 20px;
}
and other snippet where fonts are mentioned:
==================================
}
blockquote
{
font-style: italic;
font-family: Georgia, Times, "Times New Roman", serif;
padding: 2px 0;
border-style: solid;
border-color: #ccc;
border-width: 0;
}
where should i go and to where should i add new font, for example Roboto, if I want a new font in a dropdown in CKEditor?
In the next version of concrete5, you should be able to customize this using the CKEditor configuration options.
Description of the CKEditor configuration options and examples:
https://github.com/concrete5/concrete5/pull/5920...
https://gist.github.com/MrKarlDilkington/5a14cf2c8aca511c8c9d2026e07...
CKEditor config settings to change the font styles:
https://docs.ckeditor.com/ckeditor4/docs/#!/api/CKEDITOR.config-cfg-...
I do not recommend using the Font Size and Family plugin though. The plugin sets the font size and family using an inline style that hard codes the changes. If you want to switch your theme or theme styling in the future, you will have to manually update all your content by hand (or write a script to "clean" it).
As an alternative, I recommend setting your font size and family in your theme CSS and through custom editor styles.
https://documentation.concrete5.org/tutorials/adding-ckeditor-custom...