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:
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