How to Change Colors Size and Font Using the WordPress Text Editor

2
Shares
Share with your friends










Submit

WordPress is great out of the box and functions pretty darn well. It has a lot of robust features and is very user friendly. In fact, the built in visual editor has a lot of capability for editing word documents and helping you create content on the fly. You can change the colors, headings, but you cannot change the font size.

For some reason WordPress developers never thought to build in a font size in the visual editor. I mean, you can certainly accomplish this with a plugin, but it’s not even worth doing this. This is one of the most annoying features when you are writing and you just want to increase the font size.

Fortunately, there is something called inline-css that can help alleviate these issues very easily. All you have to do is add a very small snippet of code in the text editor and you will be able to change the font sizes of any content.

The Code:
<span style="font-size: 40px;"> Enter your text here </span>

Replace “Enter your text here” with your desired text. You can use em, rem or % instead of the px value for the font size. This will all work. This is great if you just need to use this one time. If you plan on doing this more frequently, consider creating a new css class and assign all the text that will be larger text that class. Avoid using H1-H6 tags for modifying the text’s font size. They serve a different purpose and are generally not used for simple size modification.

This helps tremendously when using the default visual editor in WordPress. As always, there are plugins available to help you with this, but if you can avoid using a plugin for something as simple as this, then it’s worth learning the bit of code that you’ll need to edit your content.

Again, you want to minimize the usage of plugins on a WordPress install.

How_to_Change_colors_Size_and_Font_Using_the_WordPress_Text_Editor_ColorsWhen you attempt to change color of certain text, it’s located in the built in the WYSIWYG toolbar.

For one time color changes, this is a great tool. But if you plan on having a consistent size and color schema to a particular set of text within all your posts or pages, it’s best to create a custom class for that text modification. That way, you just have to call the class one time every tim your reference it. You can also modify it globally if you change your mind about the appearance, instead of going n each page and post and modifying each and every code that you used to change the color of that text.

This goes the same for font. You can also change the font by using inline-css. This is only effective if you plan on using this font one time and for a very special purpose like demonstrating the font or just having something a bit more fancy than the default font be present on your page or post.

The Code:
<span style="font-family: verdana;"> Enter your text here </span> 

Replace “verdana” with whatever font you have installed and you are trying to utilize.

As a side note, you must have this font installed on your WordPress backend. It’s essential that you have the font living in a folder where it can be referenced, if you are planning on using a paid font, or one that is not default. Installing a font can take some understanding of FTP, but it’s not overly difficult.

How do you modify your text using the visual editor? Please comment below.

2
Shares
Share with your friends










Submit

About

WP Soar is a WordPress Support company based out of the Denver Metro Area in Colorado. We focus on WordPress Tutorials, WordPress Strategy and Premium WordPress Support.