Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPB Cup
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

How to Add a Font Resizer in WordPress for Accessibility

Editorial Note: We earn a commission from partner links on WPBeginner. Commissions do not affect our editors' opinions or evaluations. Learn more about Editorial Process.

Do you want to allow your visitors to resize the text on your WordPress website?

The purpose of offering a font resizer is to provide an easier way for visitors with low vision to adjust font size without breaking a website’s layout. This helps boost accessibility.

In this article, we will show you how to add resizeable text for site visitors in WordPress.

How to add resizeable text for site visitors in WordPress

Why Add Resizeable Text to Your Website?

Finding the right font for your WordPress website is important because it plays a massive role in making your site attractive and helps visitors read your content.

However, sometimes, it might not be enough to select the best font for your website. If the font size is small, people will have a hard time reading your articles and eventually abandon your site.

An easier way of improving readability is by offering visitors the option to resize the main text on your website. This allows users to adjust the text size according to their liking and spend more time on your site.

Even though you can use the browser’s built-in zoom feature by pressing the ‘CTRL and +’ key, it increases the size of every element on the page and not just text. This may break the website’s layout and not provide a great user experience.

That said, let’s see how you can easily add resizeable text for your visitors in WordPress.

Video Tutorial

Subscribe to WPBeginner

If you’d prefer written instructions, then just keep reading. You can use the quick links below to skip to a specific method:

Method 1: Add Resizeable Text in WordPress (Classic WordPress Themes Only)

The easiest way of allowing users to resize the text on your website is by using a WordPress plugin like Accessibility Widget.

It’s a free WordPress plugin that lets you add an option to your site’s sidebar to change the text size. The plugin is lightweight and very easy to use.

That said, do note that the Accessibility Widget plugin is not compatible with Full Site Editing and block themes, so it will only work if you use a classic theme.

Note: You may notice the plugin has not been tested with the latest WordPress versions. However, we tried it ourselves, and it works great for this purpose.

If you are not sure about trying out this plugin you can read our opinion piece on whether you should install plugins not tested with your WordPress version.

The first thing you need to do is install and activate the Accessibility Widget plugin on your website. If you need help, then please see our guide on how to install a WordPress plugin.

Upon activation, simply go to Appearance » Widget from the WordPress admin panel. Next, you can click the ‘+’ button and add the ‘Accessibility Widget’ block to your sidebar.

Add an accessibility widget block

After that, you can enter a title for the widget, like ‘Change Text Size’ or ‘Resize Text’.

Next, you need to select which HTML elements or CSS classes will be affected by the widget. The default options are body, paragraph, list items, and table cells. These options should work for most websites.

Change accessibility widget settings

The widget allows up to four resize options. The default options are 90%, 100%, 110%, and 120%. You can increase or decrease the font sizes by entering the figures in the ‘Set to these sizes’ field.

The last widget setting is controller text, and this is the text users will see. You can keep the default percentages for the text size or use a letter to show different font sizes.

Once you are done, just click the ‘Update’ button to store your widget settings.

You can now visit your website to see the widget in action. This is how the widget should appear in your website sidebar:

Change text size preview

If you feel the controller text is not noticeable, then you can change that by using CSS.

For example, add this CSS code to your theme’s stylesheet:

.widget_accesstxt a {
border: 2px solid #000;
padding: 2px;
font-weight: bold;
}

This CSS will add a border around the controller text, make it bold, and add a little padding. For more details, please see our guide on how to add custom CSS in WordPress.

Method 2: Add Resizeable Text in WordPress (All WordPress Themes)

Another easy way to let users resize the text on your website is by using WP Accessibility. This plugin lets you add a toolbar to your site to change the text size, no matter what theme you’re using.

The first thing you need to do is install and activate the WP Accessibility plugin on your website. You can see our guide on how to install a WordPress plugin if you need help.

Upon activation, simply go to the WP Accessibility page from the WordPress admin panel.

WP Accessibility Settings

In the ‘Accessibility Toolbar’ section, click the ‘Enable Accessibility toolbar’ option and select ‘Font size.’ This will add a font resizer to the toolbar.

If needed, you can also enable the Contrast and Grayscale options, too.

Additionally, you can change the font size of the content when the toolbar is clicked. You can also just select ‘Default size’ in the dropdown menu if you’re not sure what to choose.

Other than that, we recommend enabling the ‘Use alternate font resizing stylesheet’ option. When this option is enabled, users can easily switch between the default font sizes and a larger, more readable version of the text.

Feel free to enable other settings in the plugin.

Once done, just click the ‘Update Toolbar Settings’ button.

WP Accessibility toolbar settings

That’s it!

Here is what our font resize toolbar looks like on the front end:

Gif of how the WP Accessibility plugin works

For more information, you can read our guide on how to improve your WordPress site’s accessibility.

We hope this article helped you add resizeable text to your WordPress site. You may also want to check out our guide on how to improve your WordPress site performance and the best WooCommerce plugins.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

Disclosure: Our content is reader-supported. This means if you click on some of our links, then we may earn a commission. See how WPBeginner is funded, why it matters, and how you can support us. Here's our editorial process.

Editorial Staff

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

The Ultimate WordPress Toolkit

Get FREE access to our toolkit - a collection of WordPress related products and resources that every professional should have!

Reader Interactions

8 CommentsLeave a Reply

  1. Syed Balkhi says

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. Shushanna says

    Hi, thanks for the amazing post. I wonder if your site does not have a sidebar, is it possible to to put the widget somewhere else, for example above the navigation.

    • WPBeginner Support says

      You can place it in your theme’s widget areas if your theme has widget areas available!

      Admin

  3. Jasper says

    I have installed the widget but don’t have the Set Controller Text box so on the website it shows the %s.
    Any sugestions? Thanks

  4. Ivo says

    Hi, I followed the instructions as on the video but noting happens. Please help.
    I actually wont it to make my girlfriend site to be zoom-able when open in mobile devices. Please suggest…
    Regards,
    Ivo

  5. Wrenling says

    This widget is AMAZING, thank you so much!!

    I’m curious, I added it to my blog and it is EXACTLY what I wanted, but it only affects the main page of the blog – if you click on an individual post, the widget disappears. Can you tell me how to fix this?

Leave a Reply to Wrenling Cancel reply

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published. Please Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.

WPBeginner Assistant
How can I help you?

By chatting, you consent to this chat being stored according to our privacy policy and your email will be added to receive weekly WordPress tutorials from WPBeginner.