Changing Font Options in CKEditor

Question

I've tried a few different methods to change the options listed in the "font" drop-down in CKEditor, to no avail.

First off, I went to Config > CKEditor > Profiles > edit each profile > Advanced Options > Custom JavaScript configuration and followed the instructions below, putting something like

config.font_names = "Helvetica Neue;Helvetica;Arial;sans-serif;"

but nothing changed. I went into the config.js file located at sites\all\modules\ckeditor\ckeditor\ and added the following lines inside the function call:

config.font_names = "Helvetica/Helvetica Neue, Hevletica, Arial, sans-serif;"

but nothing changed. I then tried removing the prior line in Drupal's Configuration menu but that also didn't help. I've cleared my browser's cache and Drupal's cache, no luck. I've tried Firefox & Chrome, no luck.

Am I missing something or is this a bug? As a last resort, I could go directly into ckeditor\ckeditor_source\plugins\font\plugin.js and change the font_names listed there but the documentation I've read indicates my methods above should work, so I'm trying to avoid that.

Answer 1

I tried using the code that you mentioned above, and it didn't work. Then I went back to the basics and checked the official documentation from CKEditor's website so I added something like this:

config.font_names =
    'Helvetica, Arial, sans-serif;' +
    'Times New Roman/Times New Roman, Times, serif;' +
    'Verdana';

and it worked perfectly.

IMPORTANT NOTE: there is no need to go to a file and add the custom code in it. Actually, it's not even recommended to do that. What you should do, is go to the configuration options of CKEditor in your admin area (admin/config/content/ckeditor) press the "edit" button for the profile that you want to add this option to, and add the code from above in the "Advanced Options" -> "Custom JavaScript configuration".

Save the edits and you are good to go.

P.S: I didn't even need to clear the cache. The effects were visible instantly.

Answer 2

Solution: It took me quite a while to figure this out. Let us say you want to use Verdana as the default font. Here is what you can do:

1. Open contents.css and change the font tag:

   font-family: Verdana;

2. In the application/page where the output will be published, add this style:

   .entry-content {font-family: Tahoma;}

That's it! Now you have change the default font successfully. This works for the font size as well. I just finished developing this question2answer site, http://banatbanat.com, which utilizes CKEditor and this tiny issue kept me awake for two days!