This took me a while to figure out, mainly because I:

Went the quick and dirty route
Found a TON of tips on how to add Google Web and other web fonts, which I didn’t want because I
Wanted to load custom (TTF) fonts

I was about to use a WordPress plugin called Fonts, because it was minimal and had exactly what I needed:

The buttons to choose Font family and size
Enabled the possibility to add custom fonts

But, alas, there was a snag that I wasn’t particularly interested in pursuing. When reading the instructions on how to add custom fonts to the fonts list, you get linked to the WP SITES page where it, when coming to the actual solution part of the answer, states:

You have reached content available exclusively for members.

To enjoy unlimited access & support, register using this form, or login.

Clicking the register button and what do you know; registering sets you back $49.99 a month!

So instead I went the “Spend hours, days, even weeks” route (it took me longer than I suspected, I’ll give it that) and figured out something that seems to work!

Step 1 – Fonts

Now, I’m no expert in this field so I took the trusted “Throw it on the wall and see what sticks” approach and converted the fonts I needed to a number of other font formats, other than the one I had (otf). In the end, what I use is:

EOT
WOFF
TTF

The tools I used for this is FontForge and ttf2eot, both for Windows.

Step 2 – Development

You need:

1 piece of Theme
1 set of Plugins

Theme

If it’s one of your own themes or one that you made a child theme out of or you’re just messing in another one’s, doesn’t really matter. I will not go into any detail on how to make themes or edit the files for a specific theme, as that is abundantly well described pretty much everywhere on the InterWeb.

What really matters is what you put in the style.css (or corresponding style file) which is this:

/wp-content/plugins/add-fonts/fonts/my-font.css

Important to note here is that I reference a path to a plugin. If I can, I try to consolidate things. You could potentially place these wherever you’d like, but having a shared space is nice.

Now, this means that the wordpress pages will load the fonts (read on and you’ll see the contents of my-font.css as well) so they become available to the browser for viewing, should they not be available on the viewer’s computer already.

Onwards to the plugin!

Plugin

This is the gritty part to make TinyMCE actually show you the Font family dropdown box and load up the fonts you want. This took a b unch of hours to navigate, as I’m not used to mucking around in TinyMCE and the border between what WordPress can do and what TinyMCE expects is certainly not clear cut!

Anyways, what I ended up with is this folder structure

wp-content
- plugins
  - add-fonts
    - add-fonts.php
    - fonts
      - My-Font.eot
      - My-Font.woff
      - My-Font.ttf
      - my-font.css

I’m not claiming this to be the best structure, it’s just one that seem to work ok.

add-fonts.php

The meat of the plugin. This makes sure to

Add the Font family button to TinyMCE
Add the fonts you want to the Font family dropdown
Reflect your changes when you select a font

Quite simply, this is what it looks like:

/**
 * @package Add_Fonts
 * @version 1.0
 */
/*
Plugin Name: Add Fonts
Plugin URI:
Description: This simply adds "back" the Font Family button in TinyMCE and enables a custom (local) font
Author: Jonas Hellström (shellström)
Version: 1.0
Author URI: 
*/

/**
 * Adds the Font Family button
 */
add_filter( 'mce_buttons_3', 'my_mce_buttons_3' );
function my_mce_buttons_3( $buttons ) {
 $buttons[] = 'fontselect';
 return $buttons;
}

/**
 * Adds new font items to the Font Family dropdown
 */
add_filter( 'tiny_mce_before_init', 'wpex_mce_google_fonts_array' );
function wpex_mce_google_fonts_array( $initArray ) {
 // The format is [Font name in dropdown=Font name in font-family of CSS]
 $theme_advanced_fonts = 'My font=My font;';
 $initArray['font_formats'] = $theme_advanced_fonts;
 return $initArray;
}

/**
 * Loads the font-faces so the editor can reflect the selected font in the editor
 */
add_action( 'admin_init', 'wpex_mce_google_fonts_styles' );
function wpex_mce_google_fonts_styles() {
 $font1 = 'http://www.if-then-el.se/wp-content/plugins/add-fonts/fonts/my-font.css';
 add_editor_style( str_replace( ',', '%2C', $font1 ) );
}

/**
 * Imports the font-face styles for some reason
 */
add_action('admin_head-post.php', function() {
 ?>
 <style>
 @import url('https://www.if-then-el.se/wp-content/plugins/add-fonts/fonts/my-font.css');
 </style>
 <?php
});

It’s somewhat self explanatory. Except for the my-fonts.css reference in there. Well, how about we take a look at that as well, shall we?:

@font-face {
 font-family : 'My font';
 font-style  : normal;
 font-weight : normal;
 src         : url('https://www.if-then-el.se/wp-content/plugins/add-fonts/fonts/My-Font.eot');
 src         : url('https://www.if-then-el.se/wp-content/plugins/add-fonts/fonts/My-Font.eot?#iefix') format('embedded-opentype'),
 url('https://www.if-then-el.se/wp-content/plugins/add-fonts/fonts/My-Font.eot?#iefix.woff') format('woff'),
 url('https://www.if-then-el.se/wp-content/plugins/add-fonts/fonts/My-Font.eot?#iefix.ttf') format('truetype');
}

Well, as you can see these are mostly a ton of references to places where the font files are. The @import rule in the theme style.css at the beginning of this article uses these font definitions, so when you change something in this file, the theme will naturally just follow along.

Adding more fonts later on should be as simple as:

Generating the font files
Adding a new @font-face definition in my-font.css and making sure the paths are set correctly
Adding new $theme_advanced_fonts = ‘My font=My font;’; rows

References

I didn’t come up with this on my own, here’s a link to where I finally got stuff up and running for real:

http://stackoverflow.com/questions/24105575/how-to-add-new-font-to-tinymce-advanced

Final words

Since you’ve now created this as a plugin, you will also have to enable it in the Plugin tool of WordPress.

Compatibility? Well, I tested this out on WordPress 4.4.2 and I have absolutely _no_ idea whether it will work on older or newer versions. But the original StackOverflow answer was written in June of 2014, so it should be alright.

Adding _your_ fonts to TinyMCE (WordPress)