/Tip: Add Font Family & Font Size to WordPress’ Visual Editor
wordpress font size

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

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 change the font size and family 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.

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 webpage. 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:

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:

So now your function should look like this:

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:

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.

 

 

Join Thousands of Others and Never Miss a Post