Drupal: How to increase the default font size in TinyMCE

Drupal LogoIf you’ve ever installed the TinyMCE module for Drupal (or indeed the WYSIWYG module which seems to be the preferred way forward), you’ll have noticed that the default font size is miniscule. My first concern as a web designer is usability. How hard is it to read and edit?

How to make the default font bigger:

Right, I’m going to do this using WYSIWYG module, but it’s almost exactly the same using the TinyMCE module.

  1. Create a CSS file in your theme’s folder. I called mine tinymce.css for obvious reasons.
  2. Go to yoursite.com/admin/settings/wysiwyg and edit the profile for the input type of your choice.
  3. Go to the CSS section of the TinyMCE profile and expand it. Switch the Editor CSS dropdown to Define CSS and then fill in CSS Path with the path to where you saved your CSS file. You can enter this manually, or you can use shorthand to point to your theme folder – like this: %b%t/tinymce.css
  4. Save your settings

What you’ve achieved up to this point is you’ve linked a new, blank CSS file to the TinyMCE editor. What you need to do now is add some CSS to alter the appearance.

A quick warning about file caching!

Whatever way the editor works, it doesn’t refresh the CSS on a page refresh. I found the easiet way to force a refresh was to type the URL to the stylesheet directly into another browser window and refresh it manually before refreshing the page.

It’s crude, but it works.

Editing the CSS file

Right, so open up the tinymce.css file in your favourite editor (Dreamweaver/Notepad/Aptana/whatever…)

I didn’t make any radical edits – just the following resulted in a decent, readable font in the editor:

body.mceContentBody {
    font-size:0.8em;
    background-color:#fff;
    padding:5px;
    line-height:135%;
    }

The class “mceContentBody” is what each instance of TinyMCE uses to identify itself, so theming based on that is a good starting point. You can do other things too – if your theme has custom classes, you can mirror the behaviour of them in TinyMCE so they give an approximation of how they’ll display. The most obvious thing I’m thinking of is image alignment classes like img.left and img.right.

I’ve checked this in IE7 and FireFox 3 and it seems to work just fine. I’d imagine that it’ll be good for most modern browsers.

Hopefully this’ll help a few other people out there who’ve been having the same problem with Drupal and TinyMCE.

7 comments

  1. Hi Gerard,A big vote of thanks for this post. I’ve was looking for a fix for this font size issue and your post solved it. Why Drupal can’t be more like WordPress and include a decent, configurable WYSIWYG editor in the core code is beyond me.

    • Thanks Adam, I’m glad you found this useful. I just know I’m going to keep coming up against this issue, so I decided to publish it for the benefit of others.I mentioned the WYSIWYG issue on drupal.org a while back, but the response was "to ensure maximum flexibility, no standard WYSIWYG should be included’. Apparently it’s up to the site architect to sort this issue out. It’s not really an acceptable answer, but one we’ll have to live with, I’m afraid.If Drupal had a decent, extensible default editor, at least there would be a degree of standardisation between installs, so people working between Drupal installs would have a familiar environment to work from.

  2. Thank you very much for posting this info.  I was pulling my hair out, trying to figure out how to modify the display font on the TinyMCE editor.  I knew that there must be some CSS in there I could modify, I just wasn’t sure where it was.I actually went into the Office 2007 theme I am using and directly added the CSS there.

  3. I’ve spent a lot of time searching and trying various suggestions. Your solution worked. If you have the time, please add this to the Drupal Handbook. Maybe in the Tips section. Better yet, contact the WYSIWYG developers and ask them to add it to their README.TXT.Ashford 

  4. Hello!Thank you for this post! I actually put the CSS into my main theme’s CSS, but it works out of the box. Our cooking blog editors have a much easier job now :-)Andrei

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s