Why the Massive Font Change in WordPress 4.1 Visual Editor?

With the release of WordPress 4.1 came a changed that I am not that happy about. The font size in the visual editor was changed from 13px to 16px!

While this might not sound like a huge deal, it is a fairly big difference to the previous size. If you are writing and editing articles every week you will definitely notice this change. My biggest complaint is that with the font so big you lose a lot of screen real estate, even on my 24″ monitor! Now I have to keep scrolling. Very annoying especially on my 5,000+ word posts. I have a feeling that the developer responsible for this is just that, a developer, and not a writer. I am all for changes and new things, but not when it drastically affects my productivity. I don’t even want to think about how this would be on a laptop screen.

Wordpress Core Tracker Change

You can see here in ticket #30038 that there was a change to update the default styles in TinyMCE.

Description

Many themes make good use of editor-style.css, but there are quite a few that still relay on the default styling of the Visual editor. It’s been some time since we’ve updated that, and the difference is quite large when switching from a theme that styles the editor to a theme that doesn’t.

Before WordPress 4.1 Change to Visual Editor (13px)

Here is a screenshot from before.
visual editor before 4.1

After WordPress 4.1 Change to Visual Editor (16px)

Here is a screenshot after.
4.1 visual editor after

The change was supposedly due to fixing a back compatibility issue. You can see the differences here in this file: wordpresswp-includesjstinymceskinswordpresswp-content.css
compare 4 to 4.1

WordPress Support Feedback

I created support ticket here. https://wordpress.org/support/topic/font-size-change-in-visual-editor-with-41 Please chime in on this if you don’t agree with this change.

How to Fix?

Solution 1

Some claim that this plugin works. https://wordpress.org/plugins/visual-editor-font-size/ I couldn’t get this work on my site, but you could try that first.

Solution 2

Thanks @Otto42 and Kris over on the Rise Forums for pointing out the functions file override. Follow the steps below to easily fix the problem without editing WP core.

Step 1

We are going to create a file named: custom-editor-style.css and drop this in the root of your theme’s WordPress folder. It might already exist, if so simply append the following code.

body {
font-size: 13px;
}

You can change the font size accordingly to whatever size you want.

Step 2

Next you are going to add a new function to the bottom of your theme’s functions.php file.

function my_theme_add_editor_styles() {
    add_editor_style( 'custom-editor-style.css' );
}
add_action( 'init', 'my_theme_add_editor_styles' );

Now your new style will override the 16px. Enjoy!

As always feel free to leave your comments below.

author bio
Brian Jackson

I craft actionable content and develop performance-driven WordPress plugins. Connect on X, subscribe to my newsletter (once a month), or buy me coffee.

Leave a Comment