UPDATE: An error occurred in the code below when this post was published, it should be correct now. Please leave any problems or questions in the comments. Thanks!
So, have you ever been a little frustrated that there isn’t an easy way to change the text size or font when writing a WordPress post? Well, today I’m going to show you how to change the font type or size, using a little html. Don’t worry, its not as hard as it sounds. 🙂
In this example we are going to change a few words to be 24px.
First make sure you are in the “Text” editing mode…
You will see sets of code where you saw images when you were in the “Visual” tab and the text will look a little more mechanical. Find the text you want to change and put this at the beginning of it:
<span style=”font-size: 24px;”>
Then put </span> at the end of the text you want changed. MAKE SURE you do this part or all the text after that first part of code will be changed and things get royally messed up when you don’t close a piece of code.
So for example, if I wanted to make the text “MAKE SURE” above to be 24px the code in the text editing tab would look like:
<span style=”font-size: 24px;”>MAKE SURE</span>
And thats it! Pretty easy right? You can also use this to change other aspects of text such as the color or the font. (WordPress has a built in way to change the color of text though)
If you want to change the font of the text you would add font-family: ‘NAME OF FONT’; in between the parentheses, after that first semicolon. You do have to be careful with fonts though because if the person viewing your site doesn’t have that particular font on their computer they will not see that text in that font. So its best to stick with fonts that come default on the majority of computers OR there is a great resource called Google Web Fonts, but thats a tutorial for another time.
Leave any questions in the comments and I’ll try my best to help!
Tauni Everett
Creative Director at Tauni Everett
- How to Get the Most Out of a Blogger Conference
- How to Connect with Brands on Twitter
- How to Use Emojis on a Mac Keyboard
- Don’t Lose Income: Properly Install Amazon’s Affiliate Disclosure Policy
- How to Manage Multiple Instagram Accounts
- How to Pick the Perfect Blog Name
- How to Create a Navigation Bar in WordPress
- How to Check Facebook’s Spam Filter
Hmmm. I can’t seem to get it to work. I am in the HTML tab and after saving it and clicking on preview, this is what it ends up looking like (and yes, I am closing the code)
24px;”>this is a test
8px;”>testing 1 2 3
HI Karri! It looks like there was an error when publishing this post so the code did not publish correctly….I will fix it right now. Let me know if it still doesn’t work for you.
Karri it should be correct now….try it again. Thanks!
Yeah,I did it! Now, how about color?
You should be able to just highlight the text and change the color with the WordPress formatting tools. 🙂
this is so helpful and makes it seem so easy…. Thank you!
Do you have any advice on how to change sidebar fonts?
Christi….to change the sidebar fonts you need to change the CSS of your theme…its a little more complicated. I’d be happy to help if you need!
Thanks!