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.