So you’ve probably been scratching your head as to where to to increase the font-size in the text editor. You’re quest for adding for font parameters, have shown you nothing but bloated plugins.

Fear not in this small tutorial I will guide you how to add custom font-size  and custom font-family to your editor.

Add custom font-size and font-family

So first i’m going to write the code and explain it to you

// Enable font size and font family selects in the editor
if ( ! function_exists( 'am_add_mce_font_buttons' ) ) {
	function am_add_mce_font_buttons( $buttons ) {
		array_unshift( $buttons, 'fontselect' ); // Add Font Select
		array_unshift( $buttons, 'fontsizeselect' ); // Add Font Size Select
		return $buttons;
	}
}
add_filter( 'mce_buttons_2', 'am_add_mce_font_buttons' ); // you can use mce_buttons_2 or mce_buttons_3 to change the rows where the buttons will appear

So basically what the above code does is, it adds a default font-family and font-size of the editor.

All I did was un-shift the pre existing buttons. In-order to change the PT to PX all you need to do is have a look at the code below

Adding Custom Font Size

// Customize Tiny mce editor font sizes for WordPress
if ( ! function_exists( 'am_tiny_mce_font_size' ) ) {
	function am_tiny_mce_font_size( $initArray ){
		$initArray['fontsize_formats'] = "9px 10px 12px 13px 14px 16px 18px 21px 24px 28px 32px 36px";// Add as needed
		return $initArray;
	}
}
add_filter( 'tiny_mce_before_init', 'am_tiny_mce_font_size' );

The above codes shows that all you need to is pass the values as needed

Adding Custom Font Family

So we have now how easy it is to add a custom parameters to font-family. Here’s a neat way to add custom font family as well.

// Add custom Fonts to the Fonts list
if ( ! function_exists( 'am_add_google_fonts_array_to_tiny_mce' ) ) {
	function am_add_google_fonts_array_to_tiny_mce( $initArray ) {
	    $initArray['font_formats'] = 'Lato=Lato;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 $initArray;
	}
}
add_filter( 'tiny_mce_before_init', 'am_add_google_fonts_array_to_tiny_mce' );

There you have it. You can now know how to add custom font-size and font-family to the WordPress editor.