Mastering WordPress: A Simple Guide to Effortlessly Change Font Size

The size of your font is crucial for ensuring that your website’s content is clear, easy to read, and visually attractive.

Whether you operate a blog, an online store, or a corporate website, knowing how to modify font sizes in WordPress allows you to tailor your design to reflect your brand and enhance the user experience.

At CanadaCreate, we have been creating WordPress articles for over ten years. Throughout this period, we have consistently focused on making our content readable and accessible to our audience, which includes choosing a font size that is both easy to read and visually appealing.

In this article, we will guide you through the simple process of changing the font size in WordPress posts and themes.

Reasons to Adjust Font Size in WordPress

Adjusting the font size on your WordPress website can enhance readability and make it simpler for users to engage with your content.

Additionally, increasing the font size can help emphasize key information on your WordPress blog.

For instance, if you are promoting an affiliate product on your site, enlarging its font size can make the product more prominent. It can also improve readability for users accessing your website on mobile devices.

Let’s explore how to easily adjust font size in WordPress.

In this tutorial, we will cover various methods, so feel free to use the links below to navigate to your preferred method:

Method 1: Adjusting Font Size with Headings

If you’re seeking a straightforward way to change font size using headings, this method is perfect for you.

Incorporating headings into your content is an effective way to capture user attention with larger fonts.

Most WordPress themes display headings in a larger font compared to standard body text, helping you organize your posts and pages into sections.

Headings also enhance your website’s SEO, as search engines prioritize proper headings over regular paragraph text.

How to Insert a Heading in the Default WordPress Block Editor

First, open a new post or page in the WordPress block editor.

To get started, click the ‘Add Block’ (+) button located at the top left corner of your screen to access the block menu.

Next, locate and add the Heading block to your page or post.

The block will automatically default to Heading 2.

If you’re creating a sub-heading, it’s advisable to use the ‘Heading 2’ option.

If you wish to change the heading size, simply click on the ‘H2’ drop-down menu to choose a different option.

Alternatively, you can adjust the heading size through the block settings available in the right toolbar.

You also have the option to customize the heading’s color, style, letter case, and more.

After making your changes, remember to click the ‘Update’ or ‘Publish’ button to save your settings.

How to Add a Heading in the Classic Editor

If you are using the classic editor in WordPress, you can add headings via the Paragraph dropdown menu.

First, highlight the text you want to convert into a heading using your mouse.

Then, click the ‘Paragraph’ dropdown menu in the top left corner and select your desired heading size. You have now successfully changed the font size to a heading.

Please note that the classic editor does not support changing the sizes and colors of different heading styles.

To make those adjustments, you will need to modify your theme’s stylesheet (style.css).

Finally, click the ‘Update’ or ‘Publish’ button to save your changes.

Method 2: Adjusting Font Size in the Block Editor

This method is for you if you want to change the default font size in your Paragraph block.

First, open an existing page or post in the Gutenberg editor.

Once there, select any Paragraph block and switch to the ‘Styles’ tab in the block panel on the right side of the screen.

From this section, choose a font size from the ‘Typography’ options.

You can select from Small, Medium, Large, or Extra Large based on your preferences.

If you wish to revert your text to the original size, you can do so by clicking the three-dotted menu next to the Typography settings.

This will reveal a dropdown menu where you can select the ‘Reset’ option.

Additionally, you can use the same dropdown menu to add drop caps, adjust letter casing, spacing, appearance, and more.

After that, simply click the ‘Update’ or ‘Publish’ button to save your changes.

Please note that these features are not available in the older classic editor for WordPress. If you wish to use them, consider switching to the newer editor.

Method 3: Adjust Font Size Using a Plugin

If you’d like to adjust the font size using a plugin, you can follow this method.

First, install and activate the Advanced Editor Tools plugin. For step-by-step instructions, refer to our beginner’s guide on installing a WordPress plugin.

Once activated, the plugin provides enhanced control over font sizes and text formatting, along with various other features. It introduces a new ‘Classic Paragraph’ block that includes all the formatting options you desire.

After activation, navigate to the Settings » Advanced Editor Tools section in the WordPress admin sidebar.

From there, you can easily drag and drop formatting options from the ‘Unused Buttons’ section into the ‘Classic Paragraph’ block.

These options include font size, font family, copy, subscript, emoticons, source code, and more.

Once you’ve done that, scroll down to the ‘Options’ section and check the ‘Font Sizes’ option to access a wider selection of font sizes.

After making your adjustments, click the ‘Save Changes’ button to apply your settings.

If you are using the plugin with the Classic Editor, switch to the ‘Classic Editor’ tab located at the top of the page.

While in the Classic Editor, follow the same steps as you would in the Block Editor.

Remember to click the ‘Save Changes’ button after you have made your adjustments.

To see the plugin in action, open a new or existing page or post from your WordPress dashboard.

Once there, click the ‘Add Block’ (+) button in the top left corner of the screen to access the block menu.

From the menu, locate and add the Classic Paragraph block to your page.

You can now utilize the ‘Font Sizes’ dropdown menu to adjust the text size within the Classic Paragraph block.

Finally, click ‘Update’ or ‘Publish’ to save the changes to your post or page.

Method 4: Adjust Site-Wide Font Size Using the Full Site Editor

If you are using a block theme, this method is perfect for you. Most block themes feature a built-in global styles option that allows you to manage typography sizes throughout your entire website without any coding.

To do this, navigate to the Appearance » EditorAccess the page from your WordPress dashboard and click the ‘Styles’ icon located in the top right corner. This action will open a new panel where you can select the ‘Typography’ option.

After the new settings appear in the sidebar, you can effortlessly change the font type for your entire website from the ‘Font’ section.

Next, scroll down to the ‘Elements’ section and select the ‘Text’ tab.

You now have the ability to adjust the font size, type, and spacing for all the text across your entire website.

When you’re finished, return to the ‘Elements’ section to modify the font size for all headings, links, captions, and buttons.

If you’re still not satisfied, you can completely redefine the font size presets for your site.

These presets establish standard sizes for various text options, such as small, medium, and large. For instance, selecting ‘small’ as the font size on your website might automatically set it to 0.9 rem.

However, you have the option to customize the preset so that ‘small’ corresponds to 1 rem instead. This allows you to adjust font sizes according to your preferences.

To do this, simply click on the ‘Font size presets’ option at the bottom.

Once the new screen opens, you can easily modify the font size presets throughout the site.

Click the ‘Save’ button to apply your changes. You have now successfully adjusted the font size across your entire website using the full site editor.

Method 5: Adjust Site-Wide Font Size with WPCode

This method is ideal for those looking to change the font size throughout their entire website without using a block theme.

You can easily implement this feature by adding CSS code to your website through WPCode.

WPCode is the leading WordPress code snippet plugin available, designed to simplify and secure the process of adding code to your site.

Begin by installing and activating the WPCode plugin. For detailed guidance, refer to our comprehensive step-by-step tutorial on installing a WordPress plugin.

Important Note: WPCode offers a free plan suitable for this tutorial. However, upgrading to the pro version unlocks additional features, including conditional logic, a cloud library of code snippets, and more.

After activation, navigate to the Code Snippets » + Add Snippet section in the WordPress admin sidebar.

Once there, click the ‘+ Add Custom Snippet’ button located under the ‘Add Your Custom Code (New Snippet)’ option.

Next, select ‘CSS Snippet’ as the code type from the available options displayed on the screen.

This will take you to the ‘Create Custom Snippet’ page, where you can start by giving your code snippet a title.

For instance, we used the title ‘Change Font Size Site Wide.’

Next, copy and paste the following custom CSS code into the ‘Code Preview’ box:

p {
font-size:16px;
}

Once you have done that, simply specify your desired text size next to the ‘font-size’ line in the CSS code.

It should appear as follows.

After that, scroll down to the ‘Insertion’ section and select the ‘Auto Insert’ mode.

Your code will automatically run on your site once activated.

Finally, scroll back to the top of the page and switch the ‘Inactive’ toggle to ‘Active’.

After that, click the ‘Save Snippet’ button to apply your code.

You have now successfully changed the font size on your WordPress site.

Bonus: Change Text Color in WordPress

In addition to size, you may also want to change the text color on your website to enhance readability and visual appeal. This can improve your branding and help emphasize important information.

To change the text color, open a blog post in the block editor and select a Paragraph block. Then, navigate to the ‘Styles’ tab in the block panel and click on the ‘Text’ option.

This will bring up the color picker tool, allowing you to choose your preferred text color for the content.

If you want to change text colors site-wide, you can use WPCode, the top WordPress code snippet plugin available.

After activating the plugin, go to the Code Snippets » + Add Snippet section in the WordPress admin sidebar and click ‘Use Snippet’ under the ‘Add Your Custom Code’ option.

This will direct you to the ‘Create Custom Snippet’ page, where you need to select ‘CSS Snippet’ as the code type and paste the following code into the ‘Code Preview’ box:

p { color:#990000; }

To use a different color for your site’s headings, you will need to apply the h1, h2, h3, or similar selectors.

Finally, click the ‘Save Snippet’ button and switch the ‘Inactive’ toggle to ‘Active’.

Congratulations! You have successfully changed the text color across your entire website. For more detailed guidance, check out our tutorial on changing text color in WordPress.

We hope this article has helped you easily adjust the font size in WordPress. You might also be interested in our guide on using custom fonts in WordPress or our tutorial on disabling Google Fonts on your WordPress site.

If you enjoyed this article, please subscribe to our YouTube Channel for more WordPress video tutorials. You can also connect with us on Twitter and Facebook.