Tip: Add Font Size & Font Family to WordPress’ Visual Editor

AS you must know, the visual editor has a drop down menu where you can choose a header (h1-h6) which in fact also changed the font size depending on rules written in your  CSS file. A lot of websites use this as a method to choose the font size. I’ve even seen professional blogs explaining that that is the method to use when needing to change font size on WordPress. However, the fact is, headers are not meant for changing font size, but for creating sub-titles and creating a hierarchy within your web-page. Search engines are very interested in what you add into each and every sub-title so choose wisely.

Go to your functions.php file and paste the following code:

function scanwp_buttons( $buttons ) {
    
    array_unshift( $buttons, 'fontsizeselect' ); 
    return $buttons;
  }

add_filter( 'mce_buttons_2', 'scanwp_buttons' );

Not only are we going to add the font size selection option, now we are going to add a font family drop down option.

We just need to add another line in the function we just created. Add this line:

array_unshift( $buttons, 'fontselect' );
So now your function should look like this:

  function scanwp_buttons( $buttons ) {
    array_unshift( $buttons, 'fontselect' ); 
    array_unshift( $buttons, 'fontsizeselect' ); 
    return $buttons;
  }

Now if you try and create a new post / page and look at your visual editor you will see the font size selector, however it has lots of gaps between each font size and it uses pt units which I’m not a big fan of. So, what we are going to do is add custom font sizes and units (px). Add the following function to your functions.php file:

function scanwp_font_size( $initArray ){
    $initArray['fontsize_formats'] = "9px 10px 11px 12px 13px 14px 15px 16px 17px 18px 19px 20px";
    return $initArray;
  }
add_filter( 'tiny_mce_before_init', 'scanwp_font_size' );

If you want you can add more font sizes, just add a space between each new one just like in the previous example.

If you try and create a new post / page now, within the visual editor you will see this:

You now have a drop down menu that you can choose a font size from and if you want, you can also use the font family selector that was added right beside it.