How To Change The Font Size Of List In Gutenberg Editor [WordPress Tips]

Hey beginners, welcome back again to another “quick solution” series where you’ll get the possible solution to any problem.

Today’s question is about Gutenberg; an advanced WordPress editor to work with blocks.

It enables you to move blocks, change font size and background color right from the editor dashboard.

As it is still in the beta and testing phase, you may encounter some issues while working with this.

And one of the most common problems that you might be encountering is “Changing the font size of the list in Gutenberg editor of WordPress”

There are several methods to add the ability to increase the font size for lists in Gutenberg.

Many of you may be encountering this issue because of default theme text formatting.

There are two possible solutions…

1. By setting up the default theme font size of the ordered/ unordered list.
2. Using CSS (a simple method that always works.)

By Setting Up The Default Theme Font Size Of List

For this, you need to go to WordPress Dashboard > Appearance > Customization > Typography

After that, look for font size settings. (Some themes don’t have a Typography option SO look for other similar options instead).

Now here you need to find the desired option. It could be named as “default font size” or you may find a separate option like “ui/oi/list font size”. And from there, change the font size you want to give.

That’s it…

NOTE: This method usually works with premium themes. So if you don’t have a premium theme then prefer the second method.

Using CSS

This method works always either you have a free or a premium WordPress theme.

SEE:

First of all, follow these trails WordPress Dashboard > Appearance > Customization.

Once you have reached to WordPress customization section then look for the “additional CSS” option.

After going inside, add this simple CSS with comment…

.has-medium-font-size ui, oi, li
{ font-size:20px;
}

Copy the above code and place it inside the additional CSS section. I’ve set the font size to 20px, you can change it with your preferred font size.

Now save the changes and look at whether or not changes have reflected.

If everything is ok, then congratulations! You have successfully added the ability to increase the font size for lists in Gutenberg.

NOTE: This solution works only if you are using the Gutenberg editor.

If you have any further issues, feel free to ask me in the comment section. I will help you with any problem with the font size.

Is this solution work for you? Do share the solution with others on social media platforms.