Change font size in WordPress
How to change the font size in WordPress using HTML only
If your looking to change the font sizes in WordPress. Some authors suggest using a TinyMCE Advanced plugin from the WordPress repository (as well as using paragraph headings like <h1>HEADING 1</h1> to h6);
When performing simple tasks such as changing the font size on WordPress, using a plugin can 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, or anything that may interrupt the speed of your website.
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.
An example
<span style="font-size: small;">Your 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.
Another example with a larger font
<span style="font-size: xx-large;">TEXT HERE</span>
To change font sizes in pages and posts in WordPress, 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.
- 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 |
