How to change the font size in WordPress using HTML

WordPress font size in HTML


Learn how to change the font size in WordPress using HTML and without the use of plugins, PHP, or CSS.

I recently read an article about changing font sizes in WordPress and I didn’t like it. The author suggested to use the TinyMCE Advanced plugin 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 can negatively affect the performance of your WordPress website.

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. Fortunately you can change the font size of content on your WordPress website without the use pf plugins, excess PHP functions, CSS synatx’, or anything else that can interfere with the optimization of your 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?

How to change font size


To change the font size on WordPress using HTML, simply use HTML <span> tags with the style attribute, while utilizing the font-size property value element. It’s easier than it might sound.

1. Select the TEXT tab or HTML editor – not the Visual tab.

How to change font size in WordPress With HTML

2. Copy and paste the code shown in the example below. Use <span style=”font-size: small;”> at the beginning of the content and </span> at the end.

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

In the example above will show TEXT HERE in small font but you can change the size of the font by using a size attribute or value shown below.

How to change font size attribute


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 small absolute size value.

Listed below are 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

Tip


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

Here are some examples:

<span style="font-size: xx-large;">TEXT HERE</span>
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

Sean Doyle

Sean Doyle is a tech author and engineer with over 20 years of experience in cybersecurity, privacy, malware, Google Analytics, online marketing, and other topics. Sean's content has been featured in numerous publications.

22 Responses

  1. Nepal says:

    Hi,
    I have used it and its really working, thanks a lot for sharing a simple and easily understandable blog. It is very helpful for all.

  2. cashbet99 says:

    Unquestionably consider that that you said. Your favourite justification appeared to be at the web the simplest thing to take note of.
    I say to you, I definitely get irked while people think about issues that they
    just don’t understand about. You managed to hit the nail upon the top and also outlined out the whole thing without having side-effects , other people can take a signal.
    Will likely be again to get more. Thank you

  3. Its as if you read my mind! You appear to know a lot concerning this, like
    you wrote the written reserve in it or something. I think
    you could do with
    some pics to drive the email home a little bit, but besides that,
    this is fantastic blog. An excellent read. I’ll definitely be back.

  4. jitendra says:

    Many thanks to you. Thanks for the post. I agree and I got your point. But I want to know more… I want to make the bigger size of some special word in a sentence without any plugin. Special words in a sentence. eg. we are doing in MS word. Can it possible? Hope your answer.
    All the best
    Jitendra

  5. Emily Brown says:

    Hi,
    I have used it and its really working, thanks a lot for sharing a simple and easily understandable blog. It is very helpful for all.

  6. Rachel Recherché says:

    Is there any way you can set this as a default setting for headings?

    Right now, my heading 1 is larger than my page title. When I use the “smaller” shortcode, it works for making H1 smaller than the title, but it also makes H1 the same size as H2, and I want them to be consistently decreasing in size, without having to go back and add the short code in for each heading in each post.

    Is there a simple way to change the default wordpress setting for the heading sizes? Thanks!

  7. Stefanie says:

    Thank you so much for this! This is so useful and I have been looking for a clever solution like this since a long time 🙂

  8. Paul says:

    but what font size is small, large or extra Large ?

    are they 12, 14 and 22 or some other combination ?

    thanks

    paul

  9. Jared says:

    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.

  10. Anna says:

    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!

  11. Stefanie says:

    Thank you. This was easy to do and it worked

  12. S B says:

    Thanks! But how do you als change the line-height?
    TEXT HERE
    doesn’t work… Thanks in advance.

  13. Al says:

    Thank you for taking the time to post this info, it help tremendously

  14. Rex says:

    very helpful – thank you!

  15. Mark says:

    Many thanks, I appreciate the time taken. I agree, much cleaner than using some ‘black box’ plug-in.

    All the best,

    Mark

  16. Anonymous says:

    Thanks!

  17. Daria says:

    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! 🙂

  1. January 9, 2018

    […] This is what I found. […]

  2. January 17, 2018

    […] < span style=”font-size: ______;” > & < /span> (the _____ are words like: large, x-large, small, x-small) […]

Leave a Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.