Adding New WordPress TinyMCE Fonts

WordPress TinyMCE Default Fonts

The TinyMCE editor used by WordPress for creating and editing posts and pages uses a set of default fonts.  These fonts are available “out of the box” when WordPress is installed.

These fonts are proven to be cross-browser supported, and will suffice for 99% of common typesetting. However, what if we want to really “jazz” up the content with some additional custom fonts? Well, there is no easy interface… so we must resort to custom code.

Add a  New Font to TinyMCE

Adding a new font(s) to the TinyMCE editor is a multi-step process. Let’s first take a look at the steps:

1. Upload the new font to the server (or call font from another server).
2. Create a new stylesheet with the font declaration.
3. Add newly created stylesheet to TinyMCE Editor.
4. Define the font in the “Font Family” dropdown editor button.
5. Add newly created stylesheet to front-end and admin sides of website.

Upload Font

The first step is to select a font and make it available for referencing into our site. We see a lot of plugins who use the Google Fonts repository. If Google Fonts are desired, we can skip this step (more later).

Okay, so we have a .otf, .ttr, .woff or .woff2 font (legal for usage) on our computer desktop. This font will need to be uploaded to our server. I typically create a new folder in my wp-content directory.. and name it custom-fonts. Then, simply upload the font to the wp-content/custom-fonts directory.

Leave the font here.. and we will reference it later from our custom stylesheet.

Create New Stylesheet

Next, we need to create a new stylesheet with our new font declaration, and upload it to our server. The stylesheet will contain the rules for each of the fonts we are going to use.

The following links will help explain the stylesheet in more detail:
W3Schools
CSS-Tricks

Here is how the stylesheet should appear:

@font-face {
    font-family: seaside;
    src: url('http://mysite.com/wp-content/custom-fonts/seaside.ttf') format('truetype');
}
@font-face {
    font-family: journal;
    src: url('http://mysite.com/wp-content/custom-fonts/journal.ttf') format('truetype');
}

Lastly, we need to save this stylesheet and upload it to our server. I save mine in the same directory as the custom fonts I upload (step 1 above). This example will save the file as custom-fonts.css and upload it to the wp-content/custom-fonts directory. Final location will resemble wp-content/custom-fonts/custom-fonts.css.

Add Stylesheet to TinyMCE Editor

Now, we need to load the stylesheet we created into the TinyMCE editor. To do this, we will need to use our Child Theme.

Here is the code to intercept the TinyMCE initialization process; and allow us to add our stylesheet:

function load_custom_fonts($init) {

    $stylesheet_url = 'http://mysite.com/wp-content/custom-fonts/custom-fonts.css';  // Note #1

    if(empty($init['content_css'])) {  // Note #2
        $init['content_css'] = $stylesheet_url;
    } else {
        $init['content_css'] = $init['content_css'].','.$stylesheet_url;
    }

    return $init;  // Note #3
}
add_filter('tiny_mce_before_init', 'load_custom_fonts');  // Note #4

We are going to build upon this code in the next step.

Define Font Family Editor Button

The next step is adding the name of the font to the existing “Font Family” editor dropdown button.

Expanding on the code above; we have a little more to add:

$font_formats = isset($init['font_formats']) ? $init['font_formats'] : 'Andale Mono=andale mono,times;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;Comic Sans MS=comic sans ms,sans-serif;Courier New=courier new,courier;Georgia=georgia,palatino;Helvetica=helvetica;Impact=impact,chicago;Symbol=symbol;Tahoma=tahoma,arial,helvetica,sans-serif;Terminal=terminal,monaco;Times New Roman=times new roman,times;Trebuchet MS=trebuchet ms,geneva;Verdana=verdana,geneva;Webdings=webdings;Wingdings=wingdings,zapf dingbats';  // Note #1

$custom_fonts = ';'.'SeaSide=seaside;Journal=journal';  // Note #2

$init['font_formats'] = $font_formats . $custom_fonts;  // Note #3

The final code in our custom function will look like this:

function load_custom_fonts($init) {

    $stylesheet_url = 'http://mysite.com/wp-content/custom-fonts/custom-fonts.css';

    if(empty($init['content_css'])) {
        $init['content_css'] = $stylesheet_url;
    } else {
        $init['content_css'] = $init['content_css'].','.$stylesheet_url;
    }

    $font_formats = isset($init['font_formats']) ? $init['font_formats'] : 'Andale Mono=andale mono,times;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;Comic Sans MS=comic sans ms,sans-serif;Courier New=courier new,courier;Georgia=georgia,palatino;Helvetica=helvetica;Impact=impact,chicago;Symbol=symbol;Tahoma=tahoma,arial,helvetica,sans-serif;Terminal=terminal,monaco;Times New Roman=times new roman,times;Trebuchet MS=trebuchet ms,geneva;Verdana=verdana,geneva;Webdings=webdings;Wingdings=wingdings,zapf dingbats';

    $custom_fonts = ';'.'SeaSide=seaside;Journal=journal';

    $init['font_formats'] = $font_formats . $custom_fonts;

    return $init;
}
add_filter('tiny_mce_before_init', 'load_custom_fonts');

Now, if we open the editor and add the “Font Family” button… we should see our newly defined fonts in the dropdown list.

But wait… the fonts do not appear in their respective font format. The font will also not render properly on the front-end of the website. This is because we also have to add our stylesheet with the custom font declarations to our admin area and the front-end of the website.

Add Stylesheet to Admin and Front-end Header

The last step is to add our stylesheet (created in step 2, above) and make it available to the admin area (for the font dropdown button) and for the front-end of the website (so posts/pages have the font available).

We can achieve this with another custom function added to our child theme:

function load_custom_fonts_frontend() {

    echo '<link type="text/css" rel="stylesheet" href="http://mysite.com/wp-content/custom-fonts/custom-fonts.css">';
}
add_action('wp_head', 'load_custom_fonts_frontend');
add_action('admin_head', 'load_custom_fonts_frontend');

Remember to change http://mysite.com to the actual domain where the stylesheet file is located.

This will add our custom stylesheet to both the admin header area, and the front-end header area. Now, our custom fonts will appear correctly in the editor “Font Family” dropdown button; and also on the front-end of the website (in posts and pages).

Final Results

We have uploaded our custom fonts; created a custom stylesheet with our new font declarations; added the stylesheet to a) the content editor initialization process (so fonts render properly in the content editor) b) the admin header area (so fonts render properly in the dropdown menu) and c) the front-end of the website (so fonts render properly in posts/pages).

We can now simply highlight some text, apply our new font, and sit back and view our success.

Note: It may be desirable to adjust the “Font Size” of the new font. This button can be added via the WP Edit Pro “Buttons” tab.

Closing

This wraps up how to add fonts to the WordPress TinyMCE editor as of WordPress version 4.1 and TinyMCE version 4.

Please leave any questions, comments and/or feedback below.