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.
- Listed below are additional values that can be used accordingly to their details.
|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|