How can I set a google-font as default-font in CKEditor?

Question

I want to use 'Open Sans' as default-font in my CKEditor, but can't find out how.
I am using CKEditor 4.4.5 full.

I've included the font in my html head:

<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>

Then I tried to change CKEditor's default font by changing the CSS in its contents.css:

body
{
    /* Font */
    font-family: "Open Sans";
    font-size: 18px;
}

But this doesn't seem to work.

I also tried to set it in my Javascript:

CKEDITOR.config.font_names = "Open Sans;";
CKEDITOR.config.font_defaultLabel = 'Open Sans';

But this only seems to influence the display of the 'Font' Toolbar, not the style by itself.

note: I can use 'Open Sans' when I am using the "ckeditor-gwf-plugin", but this doesn't help me to set it as default font either.

Thanks for any help !

did you try this one yet? found on the google fonts page. body{font-family: 'Open Sans', sans-serif;} right here: http://www.google.com/fonts#UsePlace:use/Collection:Open+Sans — Stefan, Nov 25 '14 at 09:08
@Stefan i don't know how this should change anything. this just adds "sans-serif" but doesn't help me to display "Open Sans". — low_rents, Nov 25 '14 at 09:28
You can do some thing like following -http://stackoverflow.com/questions/16339258/ckeditor-4-how-to-set-default-font — Jalpesh Vadgama, Nov 25 '14 at 10:07
@JalpeshVadgama thanks, but i just found a solution that's much more simple. will post it as an answer in a sec. — low_rents, Nov 25 '14 at 10:09

allcaps · Accepted Answer · 2014-11-25T10:49:13.653

6

I assume you need to style the content area of CKEditor? Than you need to create a css file and add it to your CKEditor config like this:

contentsCss : '/path/to/style.css',

And in the style.css:

@import url(http://fonts.googleapis.com/css?family=Open+Sans);
body, p { font-family: 'Open Sans', sans-serif; }

Make sure /path/to/style.css loads. Use your browsers developer tools. Also set the appropriate selectors: body, p for text and maybe h1, h2, h3.

Most of the time the styling in this file will be the same typography styles used in your web application.

edited Nov 25 '14 at 10:49

answered Nov 25 '14 at 10:15

allcaps

10,945
1
33
54

thank you! I haven't got the time to check if your solution is working as well. But I think my solution is much simpler, if you want a general default font for every instance of your CKEditor. plus your `some_selector` needs to be `body, p` in order to override the original style just as mentioned in my own answer. – low_rents Nov 25 '14 at 10:24
ok, nevermind. I like your answer more than mine, since it allows to use custom css files. and I already tried it, it works for me. the two important things are: **1)** to use `@import` in your css file and **2)** to use `body, p` as your selector in order to make `font-size` work as well. would you mind adding the selector and some font-size to your answer? – low_rents Nov 25 '14 at 10:44
`*` would maybe override the styles for select-options in the toolbar. only tested it with `body, p` so far, which works fine as it seems. – low_rents Nov 25 '14 at 10:49
it's important to have `p` in the selector for setting the `font-size` – low_rents Nov 25 '14 at 10:50

score 1 · Answer 2 · edited May 23 '17 at 12:30

note: this is how you can generally change the default font-family and font-size for your CKEditor. In order to change it by using a custom CSS file, look at the accepted answer!

Just found out how to use a google font as default font in CKEditor:

/* contents.css of your CKEditor */
@import url(http://fonts.googleapis.com/css?family=Open+Sans);

body
{
    /* Font */

    font-family: 'Open Sans';
    font-size: 36px;
}

note: you need to add the google-font with @import url. and, be careful: font-size gets ignored here!

Then, with the help of this answer https://stackoverflow.com/a/12545905/3391783, I also managed to set the default font-size:

/* contents.css of your CKEditor */
@import url(http://fonts.googleapis.com/css?family=Open+Sans);

body, p
{
    /* Font */

    font-family: 'Open Sans';
    font-size: 36px;
}

note: you need to add the p-tag in addition to the body-tag. like the mentioned answer explains, the styles of the paragraphs are overwriting the font-size of your body.

How can I set a google-font as default-font in CKEditor?

2 Answers2