How to Change Font Size WooCommerce Storefront

Do you want to change the font size in your WooCommerce store and you are using the Storefront theme? In this brief article, you will learn how to change the font size in your online store. You may want to increase the font size of your entire page content or make a line or a paragraph larger. Ultimately, you will learn not only how to change the font size in your WordPress posts, but also how to do it across your website.

Table of Contents

WooCommerce Storefront Change Font Size

The Storefront theme was developed having a clear product display. However, the font sizes in themes are set to default according to the viewers’ preference. Just like how you can easily change product image size in WooCommerce, you can change the font size as well if visitors in your store are interested in bigger size font.

Here are the font sizes that are included:

Changing Paragraph font size in the Storefront theme.
Increase sidebar heading font size.
The font size of the menu in Storefront.

a) Steps to Increase Paragraph Font Size in Storefront theme

Here are the steps that you need to follow:

Log into your WordPress site and access the Dashboard as the admin user.
From the Dashboard menu, click on Appearance Menu > Customize.
A sidebar will appear on the left side. Scroll down and click on Additional CSS.
Add the following code to increase the font size of the paragraph in the Storefront theme.

p {

 font-size:18px;

}

However, you might want to have a paragraph or even your whole post in a larger font. This can be done easily using the default WordPress block editor.

All you need to do is just click on any paragraph block. After that, select the font size under ‘Text Settings’ on the right-hand side.

When you click on the Preset size, you can select from the drop-down, which covers Small, Normal, Medium, Large, and Huge. If you do not like the changes, you can just click the ‘Reset’ button to set your paragraph back to the default text.

Moreover, there is a ‘Custom’ option where you can simply type in the pixel size that you would like. Additionally, you can also set a large Drop Cap to appear at the start of your paragraph. However, these options are not available in the older classic editor for WordPress.

b) Steps to Change the Sidebar Heading Size in the Storefront Theme

In the recent updates of the Storefront theme, the widget title has a normal font. This means that users need to make them bigger to have a visible heading of the Storefront sidebar.

They wrote the correct style in the CSS code, but it did not work because the widget title must include !important flag to override the default style.

Here are the simple steps that you need to follow:

Log into your WordPress site and access the Dashboard as the admin user.
From the Dashboard menu, click on Appearance Menu > Customize.
A sidebar will appear on the left side. Scroll down and click on Additional CSS.
Add the following code to increase font size of the sidebar heading:

.widget-title{

font-size:50px !important;

}

This will be the Outcome:

However, what if it is a heading for a particular post? You can use headings in your content to grab user attention. This is because it only takes just a couple of seconds to decide whether they want to stay or leave your website.

Headings allow you to break down your posts and pages into sections using different subheadings. They are great for SEO, so you need to give proper headings with more weight than normal paragraph text.

You can use the default block editor by simply adding the ‘Heading’ block. You can find it in the ‘Common Blocks’ section in the WordPress block editor.

The default is Heading 2, but you can change it depending on your preferred size.

c) Steps to Increase the Size of the Menu Link in the Storefront Theme

Menus are slightly smaller, according to the preferences of many users. However, they need to upgrade their font size of menu links in the Storefront theme. Here are the steps that you need to follow:

Log into your WordPress site and access the Dashboard as the admin user.
From the Dashboard menu, click on Appearance Menu > Customize.
A sidebar will appear on the left side. Scroll down and click on Additional CSS.
Add the following code to increase the font size of the sidebar heading:

.main-navigation ul.menu > li > a, .main-navigation ul.nav-menu > li > a {

font-size:28px;

}

This will be the Outcome:

Conclusion

In this article, I have shown you different ways that you can use to easily change the font size in your online store. I have used the Storefront theme, as it is the most commonly used theme in most WooCommerce sites.

First, I showed you how you could change the font size of a paragraph in a post. Here I used CSS styling and I showed you how you could use the default WordPress block editor to change the font size.

Additionally, I shared a CSS code that you can add to change the heading of the sidebar. For heading in posts, you can use the default WordPress block editor to change the heading font using the ‘Heading’ block, found in the ‘Common Blocks’ section in the WordPress block editor. Headings allow you to break your posts and pages into sections and it is a great way of grabbing users’ attention. They are also good for SEO.

Finally, I highlighted some simple steps that you can follow to change the font size of the menu links in the Storefront theme using a custom CSS code. However, if you are not comfortable in using the default WordPress block editor or CSS styling, you can use the TinyMCE Advanced Plugin, which will make your work easier.

Editorial Staff

How to Change Font Size WooCommerce Storefront Theme

WooCommerce Storefront Change Font Size

a) Steps to Increase Paragraph Font Size in Storefront theme

b) Steps to Change the Sidebar Heading Size in the Storefront Theme

c) Steps to Increase the Size of the Menu Link in the Storefront Theme

Conclusion

Similar Articles

Related