How to Add Google Web Fonts to Your TinyMCE Editor in WordPress

In a previous post we talked about how to add multiple TinyMCE editors to your WordPress theme or plugin. For this post we’re going to stick with the TinyMCE topic and show you how to add Google Web Fonts to your TinyMCE editor.

The Default TinyMCE Editor

Before we add some Google Web Fonts, let’s first look again at what our default TinyMCE editor looks like:

All is well and good, but the important thing is what you don’t see: there are no buttons to select a font. Everything else is there for content formatting, but you can’t specify a specific font if you wanted to.

Add Font Selection to TinyMCE

The first thing we need to do is simply get TinyMCE to display the font selection option, which we can accomplish with the following code:

 1: add_filter('mce_buttons', 'add_font_selection_to_tinymce');

 2:

 3: function add_font_selection_to_tinymce($buttons) {

 4:     array_push($buttons, 'fontselect');

 5:     return $buttons;

 6: }

This code shows how we can hook into the mce_buttons filter and push the fontselect option onto our TinyMCE editor, and doing so will give us the font family dropdown list:

If you click the font family dropdown list you’ll see all of the fonts that are baked into TinyMCE by default, which are: Andale Mono, Arial, Arial Black, Book Antiqua, Comic Sans MS, Courier New, Georgia, Helvetica, Impact, Symbol, Tahoma, Terminal, Times New Roman, Trebuchet MS, Verdana, Webdings, and Wingdings.

Adding Google Web Fonts

For this exercise we’re going to add three Google Web Fonts to our TinyMCE editor: Aclonica, Michroma, and Paytone One. We’re going to do this in a few steps so that it’s very clear how this works.

Step 1: Use the theme_advanced_fonts Option

As mentioned in our previous post, TinyMCE has a bunch of configuration options, and the one we need to add Google Web Fonts is the theme_advanced_fonts option. The code below shows how we invoke a method named load_tiny_mce during the admin_head WordPress hook:

 1: add_action('admin_head', 'load_tiny_mce');

 2:

 3: function load_tiny_mce() {

 4:     $theme_advanced_fonts = 'Aclonica=Aclonica, sans-serif;';

 5:     $theme_advanced_fonts .= 'Michroma=Michroma, sans-serif;';

 6:     $theme_advanced_fonts .= 'Paytone One=Paytone One, sans-serif';

 7:

 8:     // The 'mode' and 'editor_selector' options are for adding

 9:     // TinyMCE to any textarea with class="tinymce-textarea"

 10:     wp_tiny_mce(false, array(

 11:         'mode' => 'specific_textareas',

 12:         'editor_selector' => 'tinymce-textarea',

 13:         'theme_advanced_fonts' => $theme_advanced_fonts

 14:     ));

 15: }

As you can see, the theme_advanced_fonts option is just a string delimited by a semicolon. TinyMCE then splits each item on the equal sign. The left side of the equal sign is what you see in the dropdown list, and the right side of the equal sign is what gets inserted into the editor when that font is selected.

So when this code runs and we refresh our TinyMCE editor we get the following:

Sweet! Well, sort of. Our Google Web Fonts are listed, but they aren’t formatted with their font styles. Not only that, but all of the default fonts are gone as well. So let’s fix those two things.

Step 2: Add the Font Styles

For each Google Web Font you want to include, you’ll need its @import CSS rule so you can add it to your own stylesheets. For example, here are the @import statements required for our three Google Web Fonts:

 1: @import url(http://fonts.googleapis.com/css?family=Aclonica);

 2: @import url(http://fonts.googleapis.com/css?family=Michroma);

 3: @import url(http://fonts.googleapis.com/css?family=Paytone+One);

Put these in one of your own stylesheets (i.e. admin.css) and even your style.css file and refresh your TinyMCE editor to get this:

That’s more like it. But if we type something in the editor and try to make it Michroma, this is what we get:

Those words are definitely not rendered with the Michroma Google Web Font. So let’s fix that next.

Step 3: Use the content_css Option

We need to use another TinyMCE option, this time the content_css option. Basically we’re going to take the URLs from our CSS @import rules and add them to the TinyMCE editor, as such:

 1: function load_tiny_mce() {

 2:     $theme_advanced_fonts = 'Aclonica=Aclonica, sans-serif;';

 3:     $theme_advanced_fonts .= 'Michroma=Michroma, sans-serif;';

 4:     $theme_advanced_fonts .= 'Paytone One=Paytone One, sans-serif';

 5:

 6:     $content_css = 'http://fonts.googleapis.com/css?family=Aclonica,';

 7:     $content_css .= 'http://fonts.googleapis.com/css?family=Michroma,';

 8:     $content_css .= 'http://fonts.googleapis.com/css?family=Paytone+One';

 9:

 10:     // The 'mode' and 'editor_selector' options are for adding

 11:     // TinyMCE to any textarea with class="tinymce-textarea"

 12:     wp_tiny_mce(false, array(

 13:         'mode' => 'specific_textareas',

 14:         'editor_selector' => 'tinymce-textarea',

 15:         'theme_advanced_fonts' => $theme_advanced_fonts,

 16:         'content_css' => $content_css

 17:     ));

 18: }

Pretty straightforward, but what’s happening is that TinyMCE will now include the styles found in those URLs when it renders content in the editor box. So if we go back to our TinyMCE editor we see that our text is properly formatted with the Michroma Google Web Font:

Now all we need is to get the default fonts back in the list and we’re good to go (unless of course you don’t want them, in which case you can ignore the next step).

Step 4: Put the Default Fonts Back in There

Adding back in the default TinyMCE fonts helps us put this all together, so now our load_tiny_mce function looks like this:

 1: function load_tiny_mce() {

 2:     // Google Web Fonts

 3:     $theme_advanced_fonts = 'Aclonica=Aclonica, sans-serif;';

 4:     $theme_advanced_fonts .= 'Michroma=Michroma, sans-serif;';

 5:     $theme_advanced_fonts .= 'Paytone One=Paytone One, sans-serif;';

 6:

 7:     // Default fonts for TinyMCE

 8:     $theme_advanced_fonts .= 'Andale Mono=Andale Mono, Times;';

 9:     $theme_advanced_fonts .= 'Arial=Arial, Helvetica, sans-serif;';

 10:    $theme_advanced_fonts .= 'Arial Black=Arial Black, Avant Garde;';

 11:    $theme_advanced_fonts .= 'Book Antiqua=Book Antiqua, Palatino;';

 12:    $theme_advanced_fonts .= 'Comic Sans MS=Comic Sans MS, sans-serif;';

 13:    $theme_advanced_fonts .= 'Courier New=Courier New, Courier;';

 14:    $theme_advanced_fonts .= 'Georgia=Georgia, Palatino;';

 15:    $theme_advanced_fonts .= 'Helvetica=Helvetica;';

 16:    $theme_advanced_fonts .= 'Impact=Impact, Chicago;';

 17:    $theme_advanced_fonts .= 'Symbol=Symbol;';

 18:    $theme_advanced_fonts .= 'Tahoma=Tahoma, Arial, Helvetica, sans-serif;';

 19:    $theme_advanced_fonts .= 'Terminal=Terminal, Monaco;';

 20:    $theme_advanced_fonts .= 'Times New Roman=Times New Roman, Times;';

 21:    $theme_advanced_fonts .= 'Trebuchet MS=Trebuchet MS, Geneva;';

 22:    $theme_advanced_fonts .= 'Verdana=Verdana, Geneva;';

 23:    $theme_advanced_fonts .= 'Webdings=Webdings;';

 24:    $theme_advanced_fonts .= 'Wingdings=Wingdings, Zapf Dingbats';

 25:

 26:    // Styles for the Google Web Fonts

 27:    $content_css = 'http://fonts.googleapis.com/css?family=Aclonica,';

 28:    $content_css .= 'http://fonts.googleapis.com/css?family=Michroma,';

 29:    $content_css .= 'http://fonts.googleapis.com/css?family=Paytone+One';

 30:

 31:    // The 'mode' and 'editor_selector' options are for adding

 32:    // TinyMCE to any textarea with class="tinymce-textarea"

 33:    wp_tiny_mce(false, array(

 34:        'mode' => 'specific_textareas',

 35:        'editor_selector' => 'tinymce-textarea',

 36:        'theme_advanced_fonts' => $theme_advanced_fonts,

 37:        'content_css' => $content_css

 38:    ));

 39: }

We don’t have to worry about adding anything else to the content_css option for the default fonts because those styles are already included as part of TinyMCE. And now when we look at our editor again we see all of the fonts listed like we expect:

And there you have it, a nice walkthrough for adding Google Web Fonts to your TinyMCE editors. Enjoy.