wordpress font size

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

Last modified: January 13, 2020


The WordPress visual editor is probably the area where most people / website owners spend most of their time. As you must have realized, WordPress does NOT have a built-in font size drop down that enables font size changes or font family changes within the editor. Personally, as a web developer, I (almost) never use inline CSS which is what I am about to show you how to do. However, for non web developers, it’s obviously very important to be able to add the font size and family to the WordPress editor on their own.

Note that changing a font color within the visual editor which is a built-in feature is also inline CSS so it’s not like it’s so uncommon.

Show More

* This button will show the rest of the post and open up an offer from a vendor

Using Headers for Font Change? Big No No

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.

visual editor - wordpress

Add Font Size to Wordpress

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


Add Font Family Select to Wordpress

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:

font size option

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.



Adding font size to WordPress or adding Font family might be the wrong approach for some, however, there are more than enough people out there that would consider this to be functionality that they were desperately needing. If you are part of the latter, go add font size and font family to your WordPress website and enjoy.

Save 4 Later
Email liked links to yourself