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 !

Answer 1

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.

Answer 2

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.