I have tried setting font-family: ... !important; to various combinations of elements/classes like .cke_editable or .cke_contents and others but the font insists being rendered with the default font. This beats the purpose of using a WYSIWYG in the first place.

What could I be possibly doing wrong?

Comments

klonos’s picture

klonos
he/him
Primary language English
Location 90% Melbourne, Australia - 10% Larissa, Greece
CreditAttribution: klonos commented

BTW, I was also having an issue with the toolbar buttons being messed up after upgrading the library from 4.1.2 to the latest 4.3.1. They showed up like so:

CKEditor 4.3.x toolbar buttons messed up

It turned out to be some weird browser-side cache that would not clear when clearing all (Drupal) caches. The only thing that worked was to edit the WYSIWYG profiles effected and adding a button (I randomly chose to use the "About" button), then saving the profile, then refreshing the edit page and then finally removing the added button and saving once again. That seems to have forced the browser-side cache to be refreshed and fixed the issue in firefox. Chrome was more resistant and required to also remove and add back an existing button in order for this magic to work.

Anyways, my point by mentioning this is that after the issue with the buttons got fixed, my css for changing the textarea font started working for firefox - Chrome still shows some arial font instead. I currently have this in place:

iframe.cke_wysiwyg_frame,
body.cke_editable.cke_editable_themed.cke_contents_ltr.cke_show_borders,
div.cke_contents {
  font-family: Verdana;
  font-size: 100%;
}

...but I don't know which of these selectors is actually doing the magic. I'm reluctant to remove any of them in fear of breaking it again.

As I said, the issue still stands in Chrome and I don't know what to do about it. Could the cause of it be this special caching that CKEditor uses? If so, how could I work around it? What if I decide to change the font in the future? How can I force it to be cleared without requesting every content author of the website to empty their browser caches?