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.

  • Andale Mono
  • Arial
  • Arial Black
  • Book Antiqua
  • Comic Sans MS

  • Courier New
  • Georgia
  • Helvetica
  • Impact
  • Tahoma

  • Terminal
  • Times New Roman
  • Trebuchet MS
  • Verdana
  • Web Dings

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.

The following functionality is available in WP Edit Pro; with easy to use graphical interfaces for uploading and adding custom fonts.

There is no need to follow this guide of you are a WP Edit Pro user.

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

For the purposes of this example, I have selected two fonts from the FontSquirrel website.

The two fonts will be “Seaside” and “Journal”.

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');
}
Remember to change http://mysite.com to the appropriate name of your website.

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.

It is important to add the following code in a child theme (or custom plugin) to prevent it being over-written whenever the theme is updated.

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
Notes:
1) This is the location to the CSS stylesheet we created above. Remember http://mysite.com should be changed to your actual website domain.

2) This is where we “filter” our stylesheet into the editor initialization process. We first check if any stylesheets are coming in via the $init variable; if there are not, we simply add our stylesheet. If there are, we add to the existing stylesheets.

3) We have to return the $init variable, or it will break the editor.

4) This is the filter name used by WordPress to hook into the TinyMCE editor.

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
Notes:
1) First we check if any existing fonts are in the initialization process; if they are, we use them; otherwise, we have to re-create the original set of fonts used by default in the editor.

2) Next, we write our new custom fonts. The format is (Font Name)=(“font-family” name as defined in our stylesheet). Multiple fonts are separated by a semi-colon (;).

3) Lastly, we take the original fonts, and add our original fonts.

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.

custom_fonts

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).

custom_fonts2

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.

custom_fonts3

custom_fonts4

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.


Josh Lobe has written 53 articles

Josh Lobe is the sole developer of WP Edit and WP Edit Pro. A father of two; a husband to a beautiful wife; and a small home in the suburbs... he primarily enjoys coding in WordPress and designing websites.

10 thoughts on “Adding New WordPress TinyMCE Fonts

  1. Theresa says:

    Hi I can’t get it to show on the editor bar anywhere, I have success using a function to add styles but not this, can you say why one would work but not this one?
    Thanks

  2. Deyfenn says:

    Hi Josh…just came across this write-up…very detailed, but one thing I’m not clear-on (nubie)…what file do you add the function to?  Is is the functions.php in the theme folder?  That’s the best I could figured, but no joy.  Running current version of WP Edit and Word Press.

    1. Deyfenn says:

      Ok, some joy…fonts show up in the drop down but not as their style.  I can apply them to text and they preview properly, but don’t show up in the editor.  I’ve went over the admin\head part a few times…seems simple enough 😉  deactivated and reactivated the plugin also to no effect.

      1. Josh Lobe says:

        Sorry… I just noticed the follow up. To get the fonts to be styled properly.. you’ll need to create the stylesheet. Wait, are you using the WP Edit Pro plugin?

    2. Josh Lobe says:

      It’s actually the functions.php file in your child theme folder. When making these types of adjustments; it’s best practice to create a child theme for the theme you are using. Once the child theme is active; you can begin using the child themes functions.php file to begin adding custom functions.

    1. Josh Lobe says:

      Hi Brad,

      Yes, that is certainly considered best practice. However, in an attempt to keep this tutorial simple for non-techies; I opted to not explain how to enqueue other files from other locations.

      Certainly any WP coder can opt for using the enqueue method.

Leave a Reply

Your email address will not be published. Required fields are marked *

ENTER CAPTCHA MATH *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>