How to Change Font Size in WordPress: A Quick Guide

Font size is a critical component of web design that affects usability, accessibility, and the overall aesthetic appeal of a website. In WordPress, the ability to adjust font sizes ensures that your content is readable and appealing on devices of all sizes, from desktops to mobile phones.

This guide will walk you through various methods to change font size in WordPress, covering everything from the built-in Gutenberg editor to custom CSS and plugins.

FAQ

How do I change the font in WordPress text block?

To change the font in a WordPress text block, you can either use the built-in typography settings in the block editor or apply custom CSS. If the theme supports it, you can directly select a new font and adjust size settings under the “Typography” section in the block toolbar. For themes without these options, you can add custom CSS in the “Additional CSS” section of the theme customizer or use a plugin that provides more font customization features.

How do I adjust the font size?

To adjust the font size in WordPress, you can do it directly through the WordPress editor for individual posts or pages by selecting the text you want to change and using the font size option in the block toolbar. For site-wide changes, you can modify the CSS. Add a CSS rule targeting the elements whose font size you want to change in the “Additional CSS” section of the Customizer.

What is the default font size in WordPress?

The default font size in WordPress typically depends on the theme you are using. Most themes set the default body font size to around 16 pixels, but this can vary significantly from one theme to another. You can usually find this information in the theme’s documentation or by inspecting the page elements using your browser’s developer tools to see the CSS directly applied to the text.

Why you should change font size in WordPress?

The readability of your website’s text is pivotal in maintaining user engagement and accessibility. Small font sizes can be difficult to read on mobile devices, potentially driving away visitors, while excessively large fonts may appear unprofessional or overwhelm your content.

Benefits of changing font size in WordPress:

Adjusting the font size can make your content more readable for your audience. Larger text can aid those with visual impairments and generally improve the accessibility of your website.
Proper font sizing helps create a comfortable reading experience. Too small can strain the eyes, and too large can make the content feel overwhelming.
Different font sizes can help establish a clear visual hierarchy on your pages. Larger fonts typically draw attention and are used for headings and important titles, while smaller fonts are suitable for body text and less critical information.
Font size can impact the overall design and aesthetic of your site. It can influence the perception of your brand and the professionalism of your presentation.
With the increasing use of mobile devices to access the internet, it’s important to ensure that font sizes adjust appropriately across different screen sizes for better readability and user experience.

Apart from having an appropriate font size, it is also crucial to use the right font, that will perfectly align with your website’s ideology. To change the font in WordPress read our guide here.

Simplify WordPress with 10Web

Skip and automate manual work with 10Web Managed WordPress Hosting. Optimize your WordPress website effortlessly.

Learn How

4 easy methods to change font size in WordPress

Method 1: Change font size in WordPress using headings

Headings are an effective tool for organizing content, grabbing user attention with their larger font sizes, and improving SEO by giving more weight to structured headings than to normal paragraph text.

How to add a heading in the default WordPress Block editor

Open a new or existing post/page in the WordPress block editor.
Click the Add block (+) button located at the top left corner to open the block menu.
Find and add the Heading block to your page or post.
By default, the block will be set to Heading 2, suitable for sub-headings. Adjust the heading size by clicking on the H2 drop-down menu to select a different size.
Save your changes by clicking the Update or Publish button.

How to add a heading in the Old Classic editor

If using the classic editor, start by selecting the text you wish to turn into a heading.
Open the Paragraph dropdown menu from the toolbar, then select your desired heading size.
Note that the classic editor limits customization to heading sizes and does not support changing font colors or styles directly.
To customize these elements, you’ll need to edit your theme’s stylesheet (style.css).
Finalize your changes by clicking Update or Publish.

Method 2: Change font size in WordPress using Gutenberg block editor

The Gutenberg Editor is a recent addition to WordPress that enhances the editing of media-rich posts by integrating seamlessly with the CMS.

A key feature is the use of blocks, which allow you to easily drag and drop media files into your posts, similar to other page builders.

To adjust font sizes in the Gutenberg editor, here are the steps:

Open an existing post for editing or start a new one.
Use the three-dot menu to reveal Typography settings that are not shown by default.
Move your cursor over the block you wish to change and select from one of the preset font sizes: small, medium, large, or extra large.
To set a specific font size, type it into the Size custom field, choosing from px, em, or rem units.

You can also use the slider to change font size in WordPress by making it larger or smaller.

Simplify WordPress with 10Web

Skip and automate manual work with 10Web Managed WordPress Hosting. Optimize your WordPress website effortlessly.

Learn How

Method 3: Change font size in WordPress using plugins

If you’re interested in adjusting font sizes through a plugin, here’s how you can do it.

Install and Activate the Advanced editor tools plugin. Refer to our beginner’s guide for detailed instructions on how to install a WordPress plugin.
Upon activating the plugin, navigate to Settings > Advanced editor tools in the WordPress admin sidebar.
From there, move formatting options such as font size, font family, copy, subscript, emoticons, source code, and more from the Unused buttons section to the Classic paragraph block.
Scroll to the Options section and check the Font sizes option to enable access to a broader selection of font sizes.
If you are using the Classic editor, switch to the Classic editor tab at the top of the page and repeat the necessary steps.
Click the Save changes button after making your adjustments.
To see the plugin in action, open a new or existing page/post from the WordPress dashboard.
Click the Add block (+) button at the top left corner of the screen, find the Classic paragraph block in the block menu, and add it to your page. Now you can utilize the editor in the Classic editor style and modify the WordPress font using the available tools.
Finally, click Update or Publish to save your post or page settings.

Plugins offer more flexibility and additional features for customizing font sizes. Some other popular options include:

TinyMCE Advanced Plugin: This plugin enhances the functionality of the WordPress classic editor. It allows you to change font sizes directly from the toolbar of the editor.
Zeno Font Resizer: This plugin adds a font size resizer button to your website, allowing visitors to adjust font sizes according to their preferences.
Accessibility Font Resizer: Aims to improve website accessibility, enabling users to increase or decrease text size as needed.

Method 4: Change font size in WordPress using CSS

While the method described above is excellent for beginners, the classic approach to change font size in WordPress involves using CSS, which can be a bit more complex.

However, using a plugin or the default WordPress editor requires adjustments for each post and page individually. In contrast, implementing CSS changes the font size site-wide.

Here’s how to change the font size using CSS:

Access your WordPress dashboard and navigate to Appearance > Customize.
In the WordPress Customizer, select the Additional CSS option. This is where you can enter your CSS code.

Here are some examples of CSS codes you can add:

To change the font size for the entire website:

body { font-size: 1.25rem; }

To change the font size for all paragraphs:

p { font-size: 25px; }

To adjust the font size for specific headings, like H2:

h2 { font-size: 2.5em; }

To modify the font size of list items in the sidebar:

.sidebar li { font-size: 12px; }

To customize the font size in the footer:

.footer { font-size: 150%; }

To set different font sizes for various screen sizes:

html { font-size: 18px; }

@media (min-width: 900px) { 

 html { font-size: 20px; } 

}

CSS allows the use of several units for specifying font size:

Em (em): A scalable unit that is used in digital media. One em is equivalent to the current font size in pixels.
Pixels (px): A fixed-size unit that is best used in screen media. One pixel is equal to one dot on the digital display.
Points (pt): This unit is used mainly in print media and is equal to 1/72 of an inch.
Percent (%): This size is relative to the surrounding element, with 100% being the default size. Adjustments to the percentage will scale the font size accordingly.

Conclusion

Changing the font size in WordPress is a straightforward process that can significantly enhance the readability and visual appeal of your website. Whether you prefer using the Gutenberg block editor, classic CSS techniques, or various plugins to change font size in WordPress, each method offers its own benefits and can be tailored to suit your specific needs.

Remember, the right font size not only improves user engagement but also accessibility, making your website more inclusive and easier to navigate for all visitors. By following the steps outlined in this guide, you can ensure that your content stands out and provides a smooth viewing experience across all devices.