WordPress Wednesday: Changing the WYSIWYG and HTML Editor Typefaces

Geek Factor: 2

In this week’s WordPress Wednesday, we’re going to cover how to change the visual and text editor typefaces in WordPress.

Changing the WYSIWYG Editor Typeface

Customizing the WYSIWYG editor’s fonts can be very helpful — it can give anyone writing for the website a chance to see (roughly) what their content will look like on the front-end of the site. Customizing the editor styles can also give you an opportunity to increase legibility and making editing text easier.

The WYSIWYG view of the WordPress editor is loaded in an iframe, so any custom CSS can be applied by uploading a CSS file in the site’s active theme, and referencing that file from the theme’s functions.php. The path to the CSS file should be relative to the functions.php file, so if the editor CSS is called ‘editor-style.css’ and it is in the root of the current theme, you would link to it like so:

[php] // adds custom CSS to WordPress editor add_editor_style('editor-style.css'); [/php]

You can find out more information about custom stylesheets for WordPress’s WYSIWYG editor on the Codex.

Changing the HTML Editor Font in WordPress 3.3+

Changing the typeface of the HTML view of the editor is a little different. This view of the editor is simply loaded as a textarea in the WordPress UI. This means a separate stylesheet is not necessary; instead, the styles will need to be written to the top of the page.

This example is from WPDailyBits — simply copy and paste the code into your functions.php file:

[php] add_action( 'admin_head-post.php', 'wpdb_fix_html_editor_font' ); add_action( 'admin_head-post-new.php', 'wpdb_fix_html_editor_font' ); function wpdb_fix_html_editor_font() { ?> In the above example, we’ve switched the editor’s code view to use the font-face helvetica at 15px; you can change these values to whatever you like.

Leave a Comment

Note: Fields marked with a * are required; email addresses are not published.

Legal FAQ Collections