June 16, 2020
3min Read
Suryadi K.
Changing the font size on WordPress is easy. You’ll learn everything you need to know in this article.
We’ll cover two methods – installing a plugin and using CSS.
WordPress is known for its user-friendly post editing. Just like your favorite word-processing software, it offers many options. You can edit content easily using a drop-down menu to set headings and paragraphs.
Please note that the structure of your content is important, both for visitors and SEO. Having a good heading structure helps search engines scan the main topics of your posts, especially the long ones. This will help achieve a better ranking in the search engine results pages.
The latest WordPress version comes with the Gutenberg editor. We’ll also show you how to change the font size with this tool.
Upgrade to WordPress Hosting with Hostinger today! With a guaranteed 99.99% uptime!
TinyMCE Advanced is a free plugin that lets you choose your preferred font size easily. This plugin provides you with a classic editor toolbar on the new Gutenberg editor.
First, you need to install and activate the plugin. Then, you can go to the Settings page. You’ll find two tabs: Block Editor (Gutenberg) and Classic Editor (TinyMCE).
If you want to use the classic editor only, enable Replace the Block Editor with the Classic Editor under the Advanced Settings. But, leave it unticked to use both editors side by side.
Here are the steps to change the font using this plugin:
While the above method is great for a beginner, the classic way requires CSS and might be a little bit more tricky.
However, when using a plugin or the default WordPress editor, you need to do the change for every posts and page. Using CSS changes the font size for the whole site.
Changing the font size using CSS requires adding lines of codes. You can do this via the editor or Customiser. But, we recommend the customiser as it is the easier method.
You can add lines of codes on the left-hand side box.
body { font-size: 1.25rem; }
p { font-size: 25px; }
h2 { font-size: 2.5em; }
.sidebar li { font-size: 12px; }
.footer { font-size: 150%; }
html { font-size: 18px; } @media (min-width: 900px) { html { font-size: 20px; } }
CSS stylings allow four different units to measure the size of the text:
As mentioned earlier, Gutenberg is a new WordPress addition. It is integrated within the CMS to make editing work for media-rich posts easier.
A noticeable change is the use of blocks. Blocks let you drag and drop any media files into your posts – like any other page builder platform.
Here is how a block looks like:
To change font sizes using the Gutenberg editor, follow these easy steps:
Very handy, isn’t it?
WordPress offers great options for customization including font size adjustment. A perfect font size makes your content more engaging and more comfortable to consume. These adjustments are incredibly easy to make.
Beginners can install a plugin, while users with some CSS knowledge can tweak the themes manually. Happy customizing.
May 10 2019
Grrr Gutenberg. I wanted to change the font size on a document with over 30 blocks. I gave up on the first block. Can't wait for the update to extend font size to the whole document or select and format multiple blocks
February 18 2020
I agree with Nigel. It's not the slightest bit handy not to able to set the standard size font for all your posts and pages in Gutenberg. Doing it block by block is not easy and a pain in the neck. But thanks for the explanation Hostinger. It helped to read your post and made me realise I just can't easily do what I want. So I'll give up trying.
Leave a reply