Mastering Font Size Customization in WordPress

Changing the font size in WordPress is easy and can significantly enhance your site’s readability. In this article, we’ll explore various methods to customize font sizes.

WordPress is known for its user-friendly post-editing features, similar to your favorite word-processing software. It provides multiple options for content editing, allowing you to set headings and paragraphs using a drop-down menu.

It’s crucial to structure your content effectively for both visitors and search engines. A well-organized heading structure helps search engines understand the main topics of your posts, especially longer ones, leading to improved rankings in search engine results pages.

The latest WordPress version includes the Gutenberg editor, and we’ll show you how to change font sizes using this tool.

Changing the Font Size Using the TinyMCE Advanced Plugin

The TinyMCE Advanced plugin is a free tool that allows you to easily select your preferred font size. This plugin provides a classic editor toolbar on the new Gutenberg editor.

First, install and activate the plugin. Then, navigate to the Settings page. You’ll find two tabs: Block Editor (Gutenberg) and Classic Editor (TinyMCE).

Enable “Replace the Block Editor with the Classic Editor” under Advanced Settings if you prefer using only the classic editor. Leave it unticked to use both editors alongside each other.

Create a new post or edit an existing one. You’ll see a classic paragraph editor.
Highlight the text lines you want to change, then choose the desired font size.

The result will look like this:

Using CSS – The Classic Way

While the plugin method is beginner-friendly, the classic way involves using CSS, which might be slightly more complex.

Utilizing a plugin or the default WordPress editor requires making changes for each post and page. CSS allows font size changes across the entire site.

To change font size using CSS, you need to add lines of code. This can be done via the editor or Customizer. We recommend the Customizer as it’s easier.

Go to the WordPress dashboard, then navigate to Appearance > Customize.
Select Additional CSS.

Add lines of code in the left-hand side box:

To change the entire font: body { font-size: 1.25rem; }
To change paragraph fonts: p { font-size: 25px; }
To change specific headings’ fonts: h2 { font-size: 2.5em; }
To modify sidebar font size: .sidebar li { font-size: 12px; }
To customize footer font: .footer { font-size: 150%; }
To change specific screen sizes’ font: html { font-size: 18px; } @media (min-width: 900px) { html { font-size: 20px; } }

CSS styling uses four different units to measure text size:

Em (em): A unit used in web media documents, where 1em equals 12 points.
Pixels (px): A unit used in screen media, where 1px equals 1 dot on a computer screen.
Points (pt): A unit for traditional printed media, where 1 point equals 1/72 of an inch.
Percent (%): The default is 100%, which changes upon zooming in or out.

Using the Gutenberg Editor

As mentioned earlier, Gutenberg is a new WordPress addition, integrating into the CMS to facilitate easier editing of media-rich posts.

One noticeable change is the use of blocks. Blocks let you drag and drop media files into your posts like any other page builder.

To change font sizes using the Gutenberg editor, follow these easy steps:

Select an existing post to edit or create a new one.
Click the three-dot menu to access Typography settings not visible by default.
Hover over the block you wish to modify and choose one of the four preset sizes – small, medium, large, and extra large.
If you have a specific size in mind, enter it in the Size Custom field. You can choose between px, em, or rem.
Alternatively, use the slider to increase or decrease the font size.

For those looking to host their WordPress site, consider using Hostinger for reliable and affordable hosting services.

Conclusion

WordPress offers excellent customization options, including font size adjustments. A perfect font size makes your content more engaging and easier to consume. These adjustments are straightforward to implement.

Beginners can install a plugin, while those with some CSS knowledge can manually tweak the themes. Happy customizing!

How to Change Font Size in WordPress FAQ

Here are some frequently asked questions about changing font size in WordPress.

Can I Change the Font Size for Specific Pages or Posts in WordPress?

Yes, you can change the font size for specific pages or posts in WordPress by using page builders or adding custom CSS code.

Is It Possible to Change the Font Size for Mobile Devices in WordPress?

It is possible to change the font size for mobile devices in WordPress by using responsive design techniques and media queries in your CSS.

What Is the Default Font Size in WordPress?

The default font size in WordPress depends on the theme you are using. It is usually set to 16 pixels, but it can vary. You can check the default font size by inspecting the code or using a browser’s developer tools.

Leonardus Nugraha is a Content SEO Specialist and WordPress contributor. Armed with his experience as a WordPress Release Co-Lead and Documentation Team Representative, he loves sharing his knowledge to help people build successful websites. Follow him on LinkedIn.

Starter‑Pack HTML section unchanged.

👉 Start your website with Hostinger – get fast, secure hosting here 👈