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


Tags: html,css,ckeditor,rich-text-editor,google-font-api

Problem :

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 !



Solution :

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.


    CSS Howto..

    How do I resize an image size automatically loaded in different browsers and screen size?

    Can't get table to show up using HTML and CSS

    How to resize the clockpicker?

    How do I trigger successive CSS transforms with transitions using jQuery's .css()?

    How to make div access the remaining space without using fixed height values?

    how to animate width and height 100% using css3 animations?

    How to place an element in top of another using CSS (without using absolute position)?

    How to change background-color of selected option in IE11?

    Hiding and Showing Content using CSS3, Want hidden state the be the default

    How to make div expand only from bottom down

    How to make read more option with html/CSS?

    How do I target a first-child that is visible (after children that are set to display:none), with only CSS

    How to select the first occurrence of an HTML element in CSS that does not have a specific class?

    How to center jqPagination widget?

    How to create a border that fully covers the adjacent corners in CSS?

    how to show the hidden div with same properties css with jquery

    how to create an external javascript and an external css file for date picker and how to use it in eclipse

    Only show text on image when you hover - wordpress theme

    How to create a Horizintal menu using CSS, and showing a div for an item when the item clicked

    How to determine if a device is in portrait or landscape mode using CSS

    jQuery: How to check if an element exists and change css property

    User agent, how to have diferent css files for diferent devices automaticly

    how to insert a ribbon inside a div how background without images only pure css? [closed]

    How to use min-width for “float:right” element in CSS?

    attaching div to a specific element for showing with javascript

    how does the jquery resultview on Airbnb Search Page work?

    How do I evenly space radio buttons

    How do I add a css class to an Div element in JQuery?

    Conditional css showing limit items

    How to add class with data-attribute?