How to Change Font Colors, Sizes, Etc. in WordPress (and Why You Shouldn’t)
So you just got yourself a new, custom WordPress website and now you want to play around with it. What’s the first thing you’ll want to do? Monkey with the fonts a bit, right?
Here’s how to do it, and then why you shouldn’t.
Firstly, hop into WordPress and edit a page or create a new one. To do this, click Add New under Pages in the left side navigation.
Now note the toolbar. It looks like this:
Click the Toolbar Toggle button shown here. Once you do, you’ll have quite a few additional options. For the purposes of changes font size and color, there are two options in particular that you’ll find useful.
Use this feature to change text color.
This can be used to change the font sizes used on the website, but see the important disclaimer below.Thanks! Now, why shouldn’t I do this?
Firstly, didn’t you just pay someone to build you a custom site? Or maybe you just purchased a theme that…though it’s not custom to you and is probably riddled with HTML and performances issues anyway…some designer put enough thought into to convince you to buy it. Either way, to go in and start changing colors and sizes is sort of like buying a painting but then when you get it home, decide it needs some extra trees or something.
If you’re qualified to make that sort of a change, you probably should have just built the site for yourself. 🙂
But that’s just a highfalutin web designer spitting buzzwords at you. Let’s dive into two concrete reasons not to do this.
1. Color Should Have a Purpose
Color is one of the primary tools a designer has. In any design, it helps draw the eye in a particular direction, or to establish a mood. If you start throwing in tons of different colors, you’re weakening the power of the elements on the screen which are tastefully / thoughtfully using color.
On the web, color often suggests links or buttons. It helps separate clickable text (ie, hypertext) from the rest of a sentence. Use color sparingly, and in most cases, just leave things as they are. If the designer thought something should be red, he would have made it that way.
2. HTML Tags Shouldn’t Be Used to Change Font Sizes
Firstly, fonts should be consistent across your site. Leaving it up to the built in stylesheet to handle font sizes will ensure this happens. If you start manually changing font sizes on a case by case basis, you’ll need to keep track of that across the site, and you probably won’t end up being able to do so.
Secondly, using that dropdown should be reserved for actually creating headings. If I built your site, you never need to use a Heading 1 tag. Everything below that is fine, but should be used only for actual headings. Not doing so will confuse Google and possibly knock you down a few notches in their search results.
So technically, if you want to change font sizes, you should be jumping into the Text version of the editor (there are two tabs near the top right of the content editor which allow you to toggle back and forth between Visual and Text mode).
Then you find the text you want to change, and write a little code for yourself. Something like this:
This is some text. This is the text I want to make bigger. And this is some more text.And here’s how we could make the entire middle sentence larger.
This is some text. <span style="font-size:150%">This is the text I want to make bigger.</span> And this is some more text.We’ve added an HTML Span element, then a Style attribute to that, and finally, we closed the Span element when we were done. If you absolutely need to change text size, this is the best way to do it, but be careful, if you forget to close an element or add invalid code, undesired results could occur.
In summation though, you probably paid someone a nice chunk of money to make something beautiful and functional for you. Why screw it up?