How to Change Font Storefront WooCommerce Theme

Table of Contents

The Storefront theme is one of the most popular themes used in most WooCommerce stores.

Just like WooCommerce, the Storefront theme is flexible and you can make customization to fit the needs of your brand.

Storefront uses the Helvetica Neue font by default.

This font is very simple and simplicity is always good. However, simplicity might not always fit the design that you are aiming for and you may want to use a different font.

WooCommerce Storefront Change Font Quick Guide

With that said, how do you go about changing the theme’s font? In this tutorial, I will teach you how you can change the font of your storefront theme using Google fonts.

Types of Fonts.

There are four basic types of fonts, which are both expressive and stylish. Some of them just work in a lot of situations, but you may want to express yourself with a certain type of font. This means that you have to look for a font type that is suitable to meet your needs. The main thing is to find the right balance.

Here are the types of fonts you can use:

Serif

This font is characterized by small lines attached to the end of a stroke, which is called serifs. The serif fonts are thought to be traditional font types and they are easier to read in print so they are preferred for use in print.

Sans-serif

The Sans-serif fonts are modern and minimalist. It does not have any serifs and it is recommended for web publishing.

Scripts

These fonts mimic cursive handwriting. They are also called cursive font types and have connecting letters. It is often portrayed to be feminine and elegant.

Decorative

Many fonts fall in the decorative type. They include Halloween fonts, Christmas fonts, and the iconic Star Wars font. They should only be used for decoration and never for the main copy. This is because they are novelty and should be used for specific purposes.

Serif vs Sans Serif?

When you are choosing fonts, you should only pick the ones that readers will not notice the font but the message.

Fonts like decorative and scripts can be a distraction when reading content, meaning that serif and sans-serif fonts are typically used in the body or the copy. However, what is the difference between Serif and Sans-serif type fonts?

The Serif fonts’ main purpose is to guide the horizontal ‘flow’ of the words.

The little decorations help to increase the contrast of the spacing and help the eyes and the brain in distinguishing each chunk of words as one making it easier to read.

However, this is not the case for texts made for the web, because of the limited dot per inch (DPI) in our monitors.

This means that the thick and thin lines of the serif types may not be as recognizable in small texts. This is why you need a simplified font that is minimalist, modern, and simplistic like Sans-serif.

Serif fonts are mainly used in books, newspapers, magazines, and other print media because they are good for reading. Additionally, online publishing favors the use of sans-serif fonts because of DPI limitations.

With that said, which font should you use for your WooCommerce store? Your best choice would be a sans serif font and this is true in most cases.

However, if you think that a serif font will work toward your purpose, you should use it.

Google Fonts

This is a free service, which is offered by Google and makes it easier for websites to use custom fonts.

You can choose a particular font from the Google Fonts directory, all you need to do is copy a piece of code and Google will host the font for your website.

Google Fonts is one of the best solutions out there.

Advantages of Google Fonts

Easy to install and set up.
The fonts are released as open-source and can be used for any commercial or non-commercial project for free.
It has some analytics to show the most popular fonts by usage across the web.

Disadvantages of Google Fonts

The font is hosted outside your site, meaning that it could add a slight page loading time.
These fonts are open source and they can have some quality issues except for the popular ones. Issues like missing glyphs bad scalability and fonts not showing on iOS may arise depending on the font if they are poorly executed.

The good thing about Google Fonts is that you can preview the fonts as a word, sentence, paragraph, or as a poster to help you decide the type of font to use.

Steps to Add Google Fonts in Storefront Theme

It is very simple to add Google Fonts on your website by copy-pasting. Here are the steps that you should follow:

You need to choose the font that you want to embed and select the standard code and copy.
After that, add a hook function to your child theme’s functions.php. Using a child theme is important as because the changes you make will be lost when you update Storefront.

add_action( 'storefront_header', 'jk_storefront_header_content', 40 );

            function jk_storefront_header_content() { ?>

                        // Replace this line with the copied google font code here

                        <?php

            }

*Note the part where you need to insert the code in step 1.

After doing that, your WooCommerce site is now capable of using the fonts you have selected.

How to Apply the Fonts on the Contents

The final step is to add the font to your CSS for the fonts to be live on your site. You need to add the code below, to replace the default font in Storefront to ‘Open Sans’. All you need to do is replace the font name with the font that you added in the previous section and then paste the code to your child theme’s styles.css.

h1, h2, h3, h4, h5, h6, body, button, input, textarea {

font-family: 'Open Sans', sans-serif;

}

However, if you want to use a different set of fonts for your headers, use the code below instead. Remember to replace the font name with the fonts that you added.

body, button, input, textarea {

font-family: 'Open Sans', sans-serif;

}

h1, h2, h3, h4, h5, h6 {

font-family: 'Slabo 27px', serif;

}

Here is an illustration:

However, you should note that the above codes might not work if you are using a child theme that uses a more specific selector.

Here is the Outcome:

Conclusion

That is how you change the Storefront theme’s font.

In this tutorial, I have highlighted the four types of fonts that you can use for your store.

They are Serif, Sans-serif, Scripts, and Decorative. Moreover, Serif fonts are good for reading which is why it is mainly used in books, newspapers magazines, and other print media.

Additionally, we have seen that online publishing favors the use of sans-serif fonts because of DPI limitations.

I have also shown you how you can choose fonts from Google Fonts, which are released as open-source and can be used for any commercial or non-commercial project for free.

However, the choice is yours on the type of font that you want to use for your site.

You should choose a font that is easy to read. After choosing, follow the simple steps to add Google fonts to the Storefront theme.

Joe

Joe is an experienced full-stack web developer with a decade of industry experience in the LAMP & MERN stacks, WordPress, WooCommerce, and JavaScript – (diverse portfolio). He has a passion for creating elegant and user-friendly solutions and thrives in collaborative environments. In his spare time, he enjoys exploring new tech trends, tinkering with new tools, and contributing to open-source projects. You can hire me here for your next project.