Add custom fonts to WordPress TinyMCE editor with @font-face

The list of fonts in the WordPress visual editor is quite short. There are plugins available to increase it, but I wanted to add my own custom font to the select dropdown.

There’s no plugin hook for this, so it needs a little lateral thinking. Firstly, generate your webfont @font-face in the normal way – I use http://www.fontsquirrel.com/fontface/generator or http://www.font2web.com

Then add the css to your site stylesheet as normal, e.g.

@font-face {
font-family: 'CustomFont';
src: url('fonts/customfont-webfont.eot');
src: local('CustomFont'),
url('fonts/customfont-webfont.eot?iefix') format('eot'),
url('fonts/customfont-webfont.woff') format('woff'),
url('fonts/customfont-webfont.ttf') format('truetype'),
url('fonts/customfont-webfont.svg#webfontnTz28sxq') format('svg');
font-weight: normal;
font-style: normal;
}

There is a plugin hook that adds a custom stylesheet (adding the code content_css: "stylesheet.css",), so we can use that to inject our own code by closing the quote marks first without entering a stylesheet (or you can if you want so that you can use the font in the editor) and then adding what we need, so add this into your theme’s functions.php:

function plugin_mce_addfont($mce_css) {
if (! empty($mce_css)) $mce_css .= ',';
$mce_css .= '",theme_advanced_fonts:"Custom Font=CustomFont,arial,helvetica,sans-serif';
return $mce_css;
}
add_filter('mce_css', 'plugin_mce_addfont');

So the first thing we do is close the double quotes and then leave off the final double quote in our code. This will only give you the one choice of font, however (with a browser backup to Arial etc. in case it doesn’t work).  The full list of fonts you originally had is in the file wp-includes/js/tinymce/themes/advanced/editor-template.js so we need to tack them on the end so that we can use all of them:

function plugin_mce_addfont($mce_css) {
if (! empty($mce_css)) $mce_css .= ',';
$mce_css .= '",theme_advanced_fonts:"Custom Font=CustomFont,arial,helvetica,sans-serif;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';
return $mce_css;
}
add_filter('mce_css', 'plugin_mce_addfont');

Done.