How to Change Fonts In Shopify

At the same time, legibility is of critical importance. Plus, you don’t want your website to look messy by incorporating too many font styles.

With that being said, let’s take a look at how to change your font in Shopify, the benefits of doing so, and the different options that are available to you.

Reasons To Change Your Shopify Store Font

Your choice of font is a critical part of your overall web design. It dictates the style and feel of your website while ensuring that critical information is conveyed in an easy and effective manner.

To improve readability

Your website’s type needs to have a high level of readability. Readability is a measure of how easily words, blocks of text, and phrases can be read.

It is also vital that your font has a high level of legibility. Legibility describes how easy it is to differentiate one letter from another in a particular typeface.

If your font is not easy to read, you will end up frustrating viewers, and your bounce rate will increase as a consequence.

To match your brand image

Every decision you make needs to reflect your brand image, and your choice of web font is no different.

Your brand’s personality is expressed in the fonts you use to present your brand name and tagline, as well as the rest of the content on your site.

If you run a legal firm and you use a playful font with swirls, this doesn’t give off the impression of a professional, reputable and trustworthy company.

It is critical to make sure that the font you choose reflects your brand identity.

How To Change The Font Of Your Shopify Store

Now that you know about the different benefits of changing your Shopify font, let’s take a look at the steps to follow.

Step 1:

Head to your Shopify admin area. Click on the Themes tab, and then choose Customize theme.

Once you have done this, a tab will open, and on the left-hand side, find the Themes option.

Select the Typology tab, and here you will be able to find plenty of options in terms of editing your Shopify font, such as product name, hyperlink colour, base font, and so on.

There are a number of different changes you can make from here:

To change the font, choose Custom, and input your own link and the Google font family.
To replace a customized font with a regular one, select Regular and choose your font from the drop-down list.
To amend the colour, choose the colour area, and select your colour using the picker box or by entering the hex code value.
To resize a font, simply enter the number of pixels required.

Step 2:

If you want to add your own custom font style from Google, you will need to head to Google’s font page, and then select the font you want to use.

Click on the font you’d like to use and select the style.

Head to the selected families section which should be on the right of your screen and copy the code.

Edit the HTML/CSS, click on Layout, and then select theme.liquid file.

Paste the code you copied earlier inside the </head> tag, select Save.

Next, head to assets folder and open the two style files named “theme.scss.liquid” and “timber.scss.liquid”.

Return to Google fonts and find the CSS code in the selected families section again. Copy the CSS code.

From here, return to the two files you opened and scroll down to the Typography section. Here, you can replace the existing code with the phrase you copied from Google Fonts. Replace the text after the ‘:’, ensuring to keep the phrases that mention ‘FontStack’.

Hit save!

Where Can You Find New Shopify Fonts?

There are two options when looking for a new font style for your store, and these are as follows:

Shopify Font Library

Shopify has an extensive font library, which includes system fonts, licensed fonts from Monotype, and a selection of Google fonts.

You can use all of these fonts, free of charge, across all Shopify online stores. They are provided in both WOFF and WOFF2 format.

You will receive the following Unicode ranges in all font files: Currency Symbols, Latin Extended-A, Latin-1 Supplement, and Basic Latin.

A broad range of fonts is available with Shopify supplies. However, there are some fonts Shopify is unable to include because of licensing restrictions.

Custom fonts

You may want to consider Shopify custom fonts from a third-party source so that you can make your store more eye-catching and unique to your customers.

A custom typeface can boost your brand’s identity online. It provides you with an effective way of standing out from the competition.

FAQs

Which fonts are good for eCommerce stores?

Some of the best fonts for eCommerce include Montserrat, Lato, Oswald, Playfair Display, Merriweather, Cinzel, Rubik, and Sans Serif fonts.

Can I use Google Fonts in Shopify?

Yes, it is possible to use Google Fonts on Shopify. To do this, head to Online Store on your Shopify admin, and then select Themes. Locate the theme you wish to edit, then click Actions, and then Edit Code.

Under Layout, choose theme.liquid. Scroll down until you locate the closing head tag, i.e. </head>. Paste the embed code for the Google font before this tag, and click Save.

You can take a look at the Google web font page here to see the different options they have available.

Will the new font be applied across my Shopify store?

Your new font can be applied across your entire Shopify store. However, if you only want to change the font of certain elements, this is also possible.

Are third-party custom fonts safe to use?

It is important to make sure you only use a custom font from a reputable and safe third-party provider so that you do not end up downloading a corrupt font file onto your computer.

To your success,
Jackson