Increase The WordPress Text Editor Font Size In 5 Seconds

If you're squinting while you're typing, the font is TOO small!

[2 minute read]

The default font size for the WordPress text editor (that is, the non-visual editor) is too damn small. This became particularly noticeable to me after my current theme bumped up its default font size to 18 pixels, which looks fantastic and is very readable. The default font size in the WP text editor is 13 pixels. While going from 13 to 18 is a bit excessive for the editor font, raising it just a single pixel greatly reduced the strain on my eyes while I write.

Disclaimer:

There are better (read: “proper”) ways of doing this, but they felt like too much work. The methods below are much quicker to implement.

  1. Use a browser extension, such as StyleBot for Chrome, to add the CSS snippet below to your site. This what I ended up doing. Extensions such as StyleBot allow you load specific chunks of CSS for specific URLs. In this case, you’ll need to set it to load the CSS below only for ‘www.yourblogsite.com/wp-admin’. I highlighted the ‘wp-admin’ to emphasize that you only want this CSS to load for the admin section of your site. (Not that it really matters; I doubt the .wp-editor-area class is used anywhere other than your WP editor.) Using this technique will keep your CSS modifications safe from annihilation next time you upgrade your WordPress version. The only downside is you have to install Yet Another Browser Extension.

  2. The other quick and dirty option is to simply edit the WP editor CSS directly. I did this initially, before considering that my changes might disappear after my next WP upgrade. But if this what you prefer to do, you’ll find the file(s) in the wp-includes directory for your site. Open up the editor.css and editor.min.css files, find the class .wp-editor-area, and modify the font-size property to your desired strength. I have no idea when or how WP css files are re-minified, so I’d recommend editing both files.

Your eyes will thank you next time you write a post. Here’s the necessary CSS:

.wp-editor-area {
    font-size: 14px; // Or whatever size tickles your fancy
}