Using Google Fonts in Editor Style

Being developers, we're used to looking at lines and lines of code in monospaced font and at the same time "seeing" what the page would look like in a browser. That said, it's easy for us to overlook the fact that there are quite a few non-developers out there.

Editor style is a nifty feature that allows you to match look and feel of post content inside the TinyMCE editor to what's shown to site visitors. It is extremely easy to use, but if your theme has font options and especially if it uses Google Fonts, editor style needs a little bit of extra work to style text based on font options values.

The Plan

In addition to loading editor-style.css using the add_editor_style() function, we must do following things:

Tell TinyMCE which font options are currently active

If needed, load Google Fonts stylesheets

Finally, add typography styles to our editor-style.css

Before doing any of that, you must already have a way for the site administrator to select which fonts they'd like to use. You can go with the Settings API, or - if you're one of the cool kids - the Theme Customizer, but explaining how to work with either one is not what this tutorial is about.

In order to jumpstart this project, I'll use the Underscores theme and the Theme Customizer Boilerplate. That will give me a starter theme and a way to quickly add options to the Theme Customizer, but how you handle this part is completely up to you.

Adding Font Options to the Theme Customizer

So, I downloaded a fresh copy of Underscores theme, added Theme Customizer Boilerplate to it and now I'm ready to add some options to the Theme Customizer, using the Customizer Boilerplate. This goes straight into the theme's functions.php file:

As you can tell looking at that array, I'm adding a body font option and heading font option to the Theme Customizer, with three possible choices for each one - Arial, Open Sans, and PT Sans for the body font, Georgia, Open Sans, and Droid Serif for the heading font.

For Google Fonts, there's the google_font value that I'll use later to load Google Fonts' stylesheets.

Telling TinyMCE Which Fonts Are Currently Selected

If we're going to be able to change fonts in the TinyMCE editor dynamically, based on what users select in the Theme Customizer, we must pass some information to the TinyMCE object.

For example, if Open Sans is selected as the body font, adding a 'body-open-sans' class to the editor will do the trick. This can be done by using the tiny_mce_before_init filter hook and changing the body_class value in the TinyMCE settings array.

If you'd like to see the entire TinyMCE settings array, check out this Gist.

Again, I'm using the Theme Customizer Boilerplate and some of its functions to speed things up, how you handle your theme options is up to you.

Load Google Fonts Stylesheets

Some of the fonts in the array of options I passed to the Theme Customizer Boilerplate had the google_font value defined. This helps determine whether the Google Fonts stylesheet needs to be loaded and what its URL is. Using that information, you can now hook into the mce_css filter and add custom stylesheets to the TinyMCE editor window:

$mce_css is a comma separated list of stylesheet URIs, so if the Google Fonts stylesheet you're loading has a comma in it you have to use an HTML entity instead. Since I added an option for both body and heading fonts I'll have to check both to see if they require the Google Fonts stylesheet:

Adding Font Styles to editor-style.css

After the last two steps, this is the easy part. TinyMCE editor now has custom classes based on active font options, and Google Fonts stylesheets are loaded, when needed. All that's left to do is add some font-family styles to editor-style.css:

Now, this method might not make too much sense if your theme allows users to select from "600+ Google Fonts". However, knowing that WordPress is built on the Decisions, Not Options principle and offering more than 600 choices for just one of the options makes even less sense.

If you prefer keeping your theme options sane by making some decisions I hope you'll appreciate this method of adding Google Fonts to the TinyMCE editor. Your feedback is welcome.