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.