WordPress font size in HTML
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.
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 – x-small
WordPress Font Example – small
WordPress Font Example – medium
WordPress Font Example – large
WordPress Font Example – x-large
WordPress Font Example – xx-large
