Installing Google Open Sans font in CKEditor

Mar 12, 2014 at 4:47 PM
According to to forum thread at ckeditor.com you should edit the config.js file
http://ckeditor.com/forums/CKEditor/Google-fonts-for-beginners#comment-130905

I am not able to find the config.js file in the CKEditor directory. Where is it located? Or can it have another name?

/ Christer
Mar 17, 2014 at 1:20 PM
Hello out there,
Is there no one with an answer my question above?
I need you help.
Thanks
Christer
Mar 17, 2014 at 2:25 PM
Sorry i do not have much time at the moment. To answer part of your question, there is no config.js because everything can be modified from the editor config tab within the Editor Options (a link to the options page is bellow the editor, when logged in as host user).

But at the moment what you are trying to do will not work, because you can only specify an local file for the contentcss setting but no url. This would be an option i have to add.
Mar 17, 2014 at 2:36 PM
OK, thanks for your response.
I started with the Editors Options and tried to add Open Sans.
I only want to add this font (Google Open Sans) and make it the default and probably only font.
Is there no way to do that currently?
Or can I install the Open Sans font local.
Thx
Christer
Mar 17, 2014 at 2:50 PM
yes there is a way to embed the css in to the local file. create a new css file in your portal home folder and select that file in the Settings under Editor area Css.

in the file you only need the code
@import url(http://fonts.googleapis.com/css?family=Exo+2|Alegreya+Sans+SC);
and in the editor config tab under font_names...
Arial;Times New Roman;Verdana;Exo 2;Alegreya Sans SC
Mar 17, 2014 at 4:22 PM
It worked partly / halfway.
The new font Open Sans is in the drop-down and I can change font - but bold does not appear bold in editor.

And when previewing - it views in Times Roman it look likes.

But after saving it shows correct. But still no bold in editor and wrong font in preview.

With Verdana everything shows correct, bold + preview.

Maybe a local installation of the font instead or do you have other suggestions?

Thx / Christer
Mar 22, 2014 at 11:03 AM
tha_watcha

Would be very happy if you have any idea how to solve the problem described in above post. Missing bold in editor and wrong font in preview.
Thanks.

Screenshot here:
http://bedingegk.se.dnnmax.com/G%C3%84ST/CKeditor/tabid/1520/Default.aspx

Regards,
Christer
Mar 22, 2014 at 7:28 PM
Edited Mar 22, 2014 at 7:29 PM
Sorry my mistake my description above was wrong. you want the open sans font so you have to put this in the css file
@import url(http://fonts.googleapis.com/css?family=Open+Sans);
and under font_names
Arial;Times New Roman;Verdana;Open Sans;
After you made the changes make sure to clear the browser cache to force the editor to reload the changed css file.
Mar 23, 2014 at 1:44 PM
Yes, I realized this and changed it already before and have Open Sans in editor.
But has the problem described with
bold NOT viewing correct and wrong font in preview.
But it saves the correct font and it is bold in document.


Any clue?

Cache is cleared. It is the same issue in Chrome, Firefox and Safari.

Best regards,
Christer
Mar 24, 2014 at 12:58 PM
For me it works with the bold text. But without seeing the problem live i can't help. What you can do is use the dom inspector inside your browser where the bold is overridden.

Regarding the Preview, you also need to put the import in your skin.css, then it will be displayed correctly in outside the editor.
Mar 25, 2014 at 9:04 PM
Edited Apr 11, 2014 at 10:32 AM
OK tha_watcha

If you could please send me your email and I can provide you with a login.
I will have the import put in the skin.

I have successfully set Open Sans 17px as the default font in the toolbar. But how do I get this font as the default font in the text area directly when opening editor. As it is now I have to mark text and select font and size in toolbar to have the text set in editor text area.

Br, Christer
Apr 1, 2014 at 9:51 AM
So i take a look at your site, the bold issue works correctly when i view it in chrome.

For the preview bellow the editor i was wrong if the Editor is loaded in the Modal Dialog the skin.css is not loaded you have to put the import line in the /portals/_default/default.css or /portals/_default/skins/_default/popupskin.css
But how do I get this font as the default font in the text area directly when opening editor.
Sorry but i couldn't find a way to do that.
Apr 11, 2014 at 10:31 AM
Thanks!
Preview now is OK
But I am sorry to hear that you could not find a way to set default font because it is quite frustrating to have to change the font, size and color every time.
Don´t you have any connection with the people at CKeditor who can help find a solution to this?
/Christer
Apr 11, 2014 at 12:30 PM
Edited Apr 11, 2014 at 1:16 PM
Well there is a solution, but it has to be defined for each tag, for example for p tags
CKEDITOR.on("instanceReady", function (event) {
    event.editor.dataProcessor.htmlFilter.addRules({
        elements: {
            p: function (e) { e.attributes.style = "font-family: Open Sans"; 
            }
        }
    });
});
Put that JS Code in a js file in the home directory and in the Editor 'Main Settings' set it under Custom JS File (If the js file is not visible make sure that js file types are set as allowed file extension in the host settings)
Apr 11, 2014 at 12:56 PM
Sounds good with a solution. But since I am a superuser, not a developer, this became "over" my current tech level. Could you pls. extend and simplify the explanation what to do.

"has to be defined for each tag" ?

"Put that JS Code in a js file in the home directory"?
A new js-file with any name?
Which one is the home directory?

Pls. excuse my novice level of knowledge.

/Christer
Apr 11, 2014 at 1:14 PM
Edited Apr 11, 2014 at 1:15 PM
eurogate wrote:
Sounds good with a solution. But since I am a superuser, not a developer, this became "over" my current tech level. Could you pls. extend and simplify the explanation what to do.

"has to be defined for each tag" ?
That means the code above works only in a p html tag

for example
<p>hello world</p>
will become
<p style="font-family: Open Sans;">hello world</p>
but it wouldn't work on
<div>hello world</div>
eurogate wrote:
"Put that JS Code in a js file in the home directory"?
A new js-file with any name?
Which one is the home directory?
Yes any name you select the file in the settings after the file is created. the Portal home folder is by default "Portals/0/" depending on which Portal ID you have (0 = Portal ID).
Apr 11, 2014 at 1:32 PM
OK thanks.
What should the code in the js file look like to cover all html tags?
/Christer
Apr 12, 2014 at 10:06 AM
use...
CKEDITOR.on("instanceReady", function (event) {
    event.editor.dataProcessor.htmlFilter.addRules({
        elements: {
            p: function (e) { e.attributes.style = "font-family: Open Sans"; 
            },
            div: function (e) { e.attributes.style = "font-family: Open Sans"; 
            }
        }
    });
});
the editor wraps all elements in p tags so that solution should work with all tags.