Append Font Family in TinyMCE

by

I’m trying to append font families to whatever prepopulated font formats are already in the dropdown. I could keep a variable of defaults and append to that but I’m trying to make it as dynamic as possible should the defaults change in the future. All the tutorials I’ve seen thus far replace the defaults with whatever as seen below:

function tinymce_testerski( $init ) {
    $init['font_formats']   = 'Arial=arial,helvetica,san-serif';

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

The problem is that font_formats key doesn’t exist in the $init array. I was hoping there would be a setting / option like style_formats_merge but I couldn’t find any such case in the TinyMCE docs.

I’m open to all solutions which would allow me to efficiently append font families to the “Font Family” dropdown.

1 Answer
1

You should use the styleselect key in the array of the TinyMCE settings for custom formats. This select is really useful for custom styles, enhancements. you find all relevant information for this solution in this answer to question #128931 in the same context.

Via fontselect

But if you like to use the font select, then use the follow source as example. The result is, that the editor add a span-tag with the font settings in inline styles, like <span style="font-family: arial, helvetica, sans-serif;">Content</span>.

The follow example source create this result, visible in the screenshot.
enter image description here

Add Font Select

At first add the the key string to get the button to font select.

/**
 * Add the "font family" button.
 */
add_filter( 'mce_buttons_2', 'fb_mce_editor_buttons' );

function fb_mce_editor_buttons( $buttons ) {

    array_unshift( $buttons, 'fontselect' );
    return $buttons;
}

Change Font List

Now you should see the default list of all fonts. The documentation have also include the list of the default value, font list. To change this list use the follow example.

/**
 * Add fonts to the "Font Family" drop-down.
 */ 
add_filter( 'tiny_mce_before_init', 'fb_mce_before_init' );

function fb_mce_before_init( $settings ) {

    $font_formats="Andale Mono=andale mono,times;"
                  . 'Arial=arial,helvetica,sans-serif';
    $settings[ 'font_formats' ] = $font_formats;

    return $settings;

}

Default Fonts

'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'

TinyMCE 3 vs 4

Small hint, this works only since TinyMCE 4*, smaller this version you must use the key theme_advanced_fonts instead of font_formats.

Use Google Fonts

This answer shoulds help.

Leave a Comment