Are you wondering how to change the font size in your WordPress posts or pages?
Whether you want to make your entire content’s font size larger, just a paragraph, or a heading, we’ll show you how to easily change the font size in WordPress.
This article is a step-by-step guide on how to change the font size in WordPress, including how you can apply these changes to singular posts, or across your whole website.
Table of Contents
1. Using Paragraph Headings
Using headings in your content is a sure-fire way of attracting a user’s attention. Users will decide in just a few seconds whether they like your website enough to stay on the page and carry on reading.
Headings allow you to break your posts and pages up using clear headings, or subheadings. In addition to offering clear guidance for users, headings are great for SEO.
Add a Heading in WordPress Block Editor
If you’re using WordPress’s default block editor, you can simply add the ‘Heading’ block to your post or page.
When you select the ‘Heading’ option, your text will default to Heading 2 (H2). If you’re using subheadings, H2 makes sense, but if you want the option to choose other subheadings, like H3, H4, and H5, you can easily select a different size.
If you want to change the color of the headings, you can do this via the block settings, where you can also change the subheading you want to use.
Add a Heading in WordPress Classic Editor
If you’re using the classic editor in WordPress, you can add headings by selecting the ‘Paragraph’ drop-down.
Simply highlight the text you want to convert into a heading, select the ‘Paragraph’ drop-down, and choose your heading size.
Depending on your theme’s stylesheet (style.css), the size and color of your headings will be displayed as such. If you’re using a premium WordPress theme, or one from a third party, you may be able to change the heading settings under Appearance > Customize.
2. Changing Font Size in Block Editor
Aside from assigning headings in your posts and pages, you can also change the text size to smaller or larger fonts. This is very simple to achieve through the WordPress block editor.
You can click on a paragraph block then change the text size under ‘Text Settings’ on the right-hand side of your WordPress post editor.
From the drop-down menu, you can change the font size to small, normal, medium, large, or huge. You can also set a custom font size in WordPress, depending on what you want to achieve. If you make a mistake, simply hit the reset button.
Unfortunately the classic editor doesn’t offer as much flexibility. I would recommend upgrading to the block editor if you want to achieve more customization. However, if you’re determined to stay with the classic editor, we’ll show you how you can get around the limitations.
3. Changing Font Size Using TinyMCE Advanced
Advanced Editor Tools (previously TinyMCE Advanced) is a WordPress plugin that allows you to stick with the classic editor while offering more control. It also works with the block editor, and adds a new block called ‘Classic Paragraph’.
You’ll first need to install the plugin and activate it. Once activated, navigate to Settings > Advanced Editor Tools and configure the settings.
If you’re using the classic editor, you should be able to see the ‘Font Size’ drop-down, allowing you to enable the editor menu. You can move it to the first row of your editor menu by dragging it upwards or leave it on the second row.
If you’re using the block editor, you’ll need to add the Font Sizes drop-down to your toolbar by dragging and dropping it. Make sure you select ‘Save Changes’ to ensure it appears in your chosen editor.
4. Changing Font Size Using CSS
If you find that you are changing the font size in every post in WordPress, it may be time to restyle your font sizes site-wide using CSS. Don’t worry, it’s not as complicated as it sounds!
Using CSS, you can change the default paragraph size for your entire website. Some WordPress themes may allow you to change the font size without using CSS, however, if it doesn’t, head over to Appearance > Customize where we’ll walk you through how to do this.
- Click Additional CSS
- Add your CSS code (use the code below and change the font size to your desired size)
The changes you make can be seen immediately on the right-hand side of the screen. When you're ready, click 'Publish' to make the changes go live.
If you want to change your default heading size, you can use the following code:
Change H2 to the heading code you want to change, such as, H3, H4, H5, etc.