Add Fonts to Advanced TinyMCE

October 14, 2016

You can achieve more stylistic versatility within your WordPress backend, and theme, if you’re able to inject fonts within the WYSIWYG editor.

This is possible if you are using embedded fonts, or if you are using fonts from a hosted library using the below function, and the Advanced TinyMCE plugin addon.

If your fonts are embedded on your website, place them in a fonts.css folder:

@font-face {
	font-family: 'Black';
	src:  url('fonts/FrutigerLTStd-Black.otf');
	src:  url('fonts/FrutigerLTStd-Black.ttf') format('truetype'); // Below function requires ttf format
}

You may need to convert fonts to ttf.

Use this function to add each font, by name to the dropdown:

function load_custom_fonts($init) {

    $stylesheet_url = 'http://www.yoursite.com/folders/fonts.css';  // 

    if(empty($init['content_css'])) {  // Note #2
        $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 = ';'.'Frutiger Black=Black;'; // Drop Down=font-family

    $init['font_formats'] = $font_formats . $custom_fonts;
	
	
	
    return $init;  // Note #3
}
add_filter('tiny_mce_before_init', 'load_custom_fonts');  //

Sourced here.