How to change the font size in WordPress using HTML

I read a recent article about changing font sizes in WordPress and I didn’t like it. The author suggests using  the TinyMCE Advanced plugin (my reaction) from the WordPress repository (as well as using paragraph headings like <h1>HEADING 1</h1> to h6); However when performing simple tasks such as changing the font size on WordPress, supported HTML can be used opposed to using bulky plugins that limit or restrict options and potentially harm the performance of your WordPress website.

While it is true that many WordPress themes do not allow the WordPress author to change font sizes using the standard <font> tag or numerical size attributes due to no HTML5 support, it is also true that you can change the font size on WordPress without plugins, excess PHP functions, CSS synatx’, or anything else that may interrupt the optimization of a WordPress website (with exceptions to a flamboyant TTC ratio).

So, how can you change font size on WordPress without using plugins or adding extra code?

To change the font size on WordPress, simply use HTML <span> tags with the style attribute, while utilizing the font-size property value element.

Here’s a quick example

<span style="font-size: small;">TEXT HERE</span>

Changing size attributes

The actual sizes of font can be changed from XX Small to XX Large by using the absolute size as detailed below in bold (<strong>TEXT HERE</strong>). These are called size property values or font-size values. You can also find a list of additional values at the bottom of this article. *In the example above we use the absolute size value small.

WordPress Font Example – xx-small

WordPress Font Example – x-small

WordPress Font Example – small

WordPress Font Example – medium

WordPress Font Example – large

WordPress Font Example – x-large

WordPress Font Example – xx-large

  • To make the font size XX Large, do not type XX Large, type xx-large.

Here’s an example

<span style="font-size: xx-large;">TEXT HERE</span>

To change font sizes in pages and posts in WordPress appropriately, use the TEXT or HTML editor and not the View tab. You can also use the <span> to tag change font sizes in widgets and PHP theme files.

How to change font size in WordPress With HTML

  • Listed below are additional values that can be used accordingly to their details.
Value Description
xx-small Sets the font-size to an xx-small size
x-small Sets the font-size to an extra small size
small Sets the font-size to a small size
medium Sets the font-size to a medium size. This is default
large Sets the font-size to a large size
x-large Sets the font-size to an extra large size
xx-large Sets the font-size to an xx-large size
smaller Sets the font-size to a smaller size than the parent element
larger Sets the font-size to a larger size than the parent element
length Sets the font-size to a fixed size in px, cm, etc.
% Sets the font-size to a percent of  the parent element’s font size
inherit Specifies that the font size should be inherited from the parent element

Sean Doyle

http://Botcrawl.com

Sean Doyle is an engineer from Los Angeles, California. Sean's primary focuses include Internet Security, Web Spam, and Online Marketing.

Comments ( 11 )

  1. ReplyPaul
    but what font size is small, large or extra Large ? are they 12, 14 and 22 or some other combination ? thanks paul
  2. ReplyJared
    Thanks!! I love when people do this. There are far too many posts out there that just affiliate market plug-ins, even for simply changing the text. I've bookmarked your post for reference. Thanks.
  3. ReplyAnna
    You are a lifesaver! I've been so frustrated trying to switch between font sizes in my Wordpress post and not being able to use the simple code. After some research I found your article and it works perfectly. Thank you!
  4. ReplyStefanie
    Thank you. This was easy to do and it worked
  5. ReplyS B
    Thanks! But how do you als change the line-height? TEXT HERE doesn't work... Thanks in advance.
    • ReplyAuthorSean Doyle
      You're welcome. There is no possibility of this not working. I would recommend to change line height using CSS.
  6. ReplyAl
    Thank you for taking the time to post this info, it help tremendously
  7. ReplyRex
    very helpful - thank you!
  8. ReplyMark
    Many thanks, I appreciate the time taken. I agree, much cleaner than using some 'black box' plug-in. All the best, Mark
  9. ReplyAnonymous
    Thanks!
  10. ReplyDaria
    Thank you for this really useful article that helped me solve my issue. I am a big fan of simple solutions and this was one of them! :)