How to Change Font Family and Size in the WordPress Visual Editor

Yesterday I was  at the Soho | SME Expo with Dave from dazil Internet Services in his exhibitor booth. We really enjoy working with Dave on various projects so when he asked if I wanted to join him at the Expo promoting all things WordPress I jumped at the chance.

During the day we met so many wonderful folks with a wide range of WordPress experience … from not having heard of WordPress to those who were running multiple websites with it. It was really such a fabulous experience and I would certainly do it again.

One particular question from a visitor caught me up a bit … how do you change the font size and font family in the visual editor while editing a page or a post? I had to stop and think … to mentally go through all the formatting icons available by default.

Screenshot of the WordPress Visual Editor Icons

To be honest, I only use a few of them regularly. I spend most of my WordPress time working behind-the-scenes in css, template and plugin (php) files.

The choices in the Format drop down are limited primarily to heading styles and I could totally understand her wanting to change the size and font-face of portions of her text without having to use a heading tag.

It happens that she is comfortable with CSS and HTML so could add in-line styles

<span style="font-family:verdana,geneva;font-size:1.3em;">
     my larger text and different font-family

or add a new rule to a stylesheet.

<span class="my-custom-text-class">
     my larger text and different font-family
.my-custom-text-class {

But what about the people who need to do this kind of thing regularly and would rather not muck about with HTML tags and CSS styles in the HTML editor?

Today I did some digging and there are indeed ready-made solutions to this problem. While there are a number of WordPress plugins available through the repository, at over a million downloads and an average rating of 3.5 stars I’d say the TinyMCE Advanced plugin is a good place to start.

I had a little hiccup getting the new icons to display after I installed TinyMCE Advanced but a combination of going to Settings –> TinyMCE Advanced and clicking ‘Save Changes’ plus refreshing my browser fixed that right up.

Screenshot of WordPress Visual Editor icons after TinyMCE Advanced plugin installed

These are just the icons I decided to add for now, there are many more to choose from on the Settings –> TinyMCE Advanced page.


Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>