How To Add A Font On Shopify Store To Imporve Typography

Are you stuck on how to add fonts to your Shopify store? This article has all the answers. While it can be okay to use basic fonts or whatever your theme carries, it’s important to note that fonts play a vital role in website design.

They influence the overall look of your store. Shopify, the leader in e-commerce platforms, offers a wide range of font customizations, allowing Shopify store owners to create visually appealing storefronts and a cohesive brand identity.

In this guide, we’ll walk you through how to add a font on Shopify to create a unique feel and look.

What are Shopify fonts?

The Shopify font library contains a collection of different fonts, including system fonts, Google fonts, and Monotype-licensed fonts.

You can access all these fonts for free on Shopify. They are in Web open font format (WOFF) and Web open font format 2.0 (WOFF2).

The fonts are categorized into two categories:

• System
• Custom

Let’s learn more about the two categories individually:

System fonts

These are the fonts that are available on your computers. The default fonts enable the theme to function as expected, so there’s no need to download fonts.

System fonts are listed under the system font category right below the available fonts. They are marked with the system badge of the theme editor font picker.

Choosing the fonts you’ll use to write texts depends on your computer’s operating system. There are three generic system fonts, including:

• Serif
• Mono
• Sans Serif, investment fonts, or Open Sans.

Custom Fonts

If you want to personalize your Shopify store and make it stand out from the crowd, use custom fonts. The secret is choosing your fonts wisely and ensuring they complement your overall store design. Custom fonts are more like different flavors for your store’s text.

For example, instead of vanilla, the default font, you can choose something fancy like chocolate or maybe even a spicy chili font, though that might be a bit much for most stores.

You can add custom fonts to your Shopify store using the following two main methods:

• Using Google Fonts, which offers a vast library of free fonts, you can easily integrate them with your Shopify theme.
• You can upload a specific font you have in mind that isn’t available on Google Fonts to your Shopify theme. This takes a bit more technical know-how, but it gives you the most control over the look of your store.

Fonts come in different file formats, but the most common ones for Shopify are WOFF and WOFF2. Some fonts, like bold or light, come in various weights and styles, such as italic. You can choose which ones you want to use for your store. It’s crucial to ensure that your font looks good on all devices, especially phones.

The importance of fonts on Shopify

Fonts on your Shopify store might seem like a small detail, but they are essential in any e-commerce business. Getting people to interact with your content is not easy. People read approximately 30% of the texts on the page, so attracting their attention is crucial.

1.   Fonts create an excellent first impression. They are like the shop window for your text. A clean, easy-to-read font makes an excellent first impression, while a messy or hard-to-understand font can turn customers away.

2.   The font sets the tone for your brand. They can convey a certain feeling to the target audience. For example, a toy store owner can use a playful font, while a sleek, modern font would suit a tech store better.

3. Fonts can be used to create a hierarchy in your store to help customers find the information they need faster. Headings can be bigger and bolder to grab attention, while product descriptions can use a smaller, easier-to-read font.

4.   Good fonts can translate to more sales, smoothing the shopping experience.

5.   If your fonts are hard to read or people get frustrated going through your store, they’re less likely to buy anything.

How to add fonts to Shopify themes

There are two ways to add fonts to Shopify themes, including:

• Fonts from the Shopify font library
• Using custom fonts

Here are the steps to follow:

Download the WebFont version of your font.

First, you’ll need the Webfont version of your chosen font. Ensure it includes WOFF and WOFF2 file types and unique formats that work well on websites.

Head to Your Shopify Theme Editor

Find the “Online Store” tab from your Shopify dashboard and then go to “Themes.” Find your current theme, click “Actions,” and “Edit Code.”

Upload your font files.

Scroll down until you see the “Assets” folder. Click on “Add a New Asset” and choose your font file. Then, hit “Upload Asset” to prepare it for use.

Add the font code to your theme.

Now, let’s tell your theme about the new font! Return to the “Assets” folder and find your theme’s main CSS file. Open it up and scroll to the bottom to add a unique code snippet.

Add this code: @font-face {

font-family: “Font name”;src: URL({{ “Filename” | asset_url }}) format(“Format”);

• Replace the font name with the actual name of the font you want. If it has more than one word, use quotation marks around it.
• Replace “File Name” with the exact name of the file you uploaded, including the extension code, like verdana_bold.ttf.
• Replace the format with the format of your font file. For example, verdana.ttf would be “TrueType.”

Save changes

After saving those changes, your theme should recognize your new font. Use it throughout your store’s design.

Adding custom fonts to Shopify

Adding custom fonts to your Shopify store is a great way to stand out from the crowd and grab your customers’ attention. It boosts your engagement but requires some coding skills since messing with code can feel intimidating. But you don’t need to worry; these steps will guide you through adding custom fonts to Shopify without needing coding skills.

Steps to add your custom font:

1. Find the WebFont version of your chosen font and download it. Remember, you only need the SVG, EOG, TTF, WOFF, or WOFF2 files.
2. In your Shopify dashboard, go to “Online Store” and then “Themes.” Find your current theme, click “Actions,” and “Edit Code.”
3. Look for the “Assets” folder in the sidebar and click “Add a New Asset.” Choose your font file and hit “Upload Asset” to add it to your theme.
4. Find the main CSS file in the “Assets” folder, usually theme.scss.liquid, and open it up. Scroll down to the bottom and paste this code:

@font-face {font-family: “Font Name”;

src: url(“File Name.woff2”) format(“woff2”),

url(“File Name.woff”) format(“woff”)}

• Replace the font name with the actual name of your font.
• Replace the File Name with the exact name of your uploaded font file.

1.  Below the above code, paste this code:

<p><span style=”font-weight: 400;”> yourcssselectorhere { font-family: “NAME OF FONT”!important; } </span></p>

1. Lastly, go to the dashboard under “assets” and click “Add a new asset.” Upload each version of the font file one by one.

Adding Google Fonts to the Shopify theme

1. Go to the Google Fonts site and select a font. The fonts are grouped into categories you can filter, including category, font properties, language, newest, most popular, trending, and name.
2.  Choose a font, copy its code, and change its size in Shopify. Check for licenses and glyphs and look for other fonts that it can be paired with. Once you identify the right font, click “select this style” and copy the code.
3. On the dashboard, go to “online stores” and “themes.” Go to “actions” and click on “edit code.”
4. Click on “Layout” and then “Theme.liquid.” Scroll to find the “head” tag (</head>) and paste the code inside it.
5. Save the changes.
6. Go to the “assets” folder and open the styles files “scss.liquid” and “timber.scss.liquid.”
7. The next step is to copy and paste CSS rules from Google. To do this, go to the font page and copy the font name, for example, Open Sans.
8. Go back to the previously opened font styles in the assets folder. Scroll to find the topography section and replace the three code lines below.

• $headerFontStack: {{ header_family.family }}, {{ header_family.fallback_families }};
• $bodyFontStack: {{ base_family.family }}, {{ base_family.fallback_families }};
• $accentFontStack: {{ accent_family.family }}, {{ accent_family.fallback_families }};

With:

• $headerFontStack: ‘Open Sans’, sans-serif;
• $bodyFontStack: ‘Open Sans’, sans-serif;
• $accentFontStack: ‘Open Sans’, sans-serif;

Save both files.

Changing fonts on Shopify

Shopify has a wide variety of fonts you can choose from to give your store a fresh look. Use the following steps to change fonts:

• Head to your Shopify dashboard, where you manage your store. Look for “Online Store” and then “Themes.”
• Find your current theme section and click “Customize.”
• Click “theme settings” and play with the “typography” settings.
• Click “Change” to use the font picker for each font type.
• If you don’t have any fonts yet, use the search bar to explore all the available fonts.
• Select the font you choose and change the style you want (like bold or italic).
• Choose a new font style from the drop-down menu by clicking the name of the currently used font type.
• If you are happy with your choices, click “Select” and then “Save.”

If you want to see what the font you’ve selected looks like before publishing, Click “Preview” to take a peek. You can play around with different fonts, sizes, colors, and placements here until you love it. The preview allows you to see how your fonts will look on your store before you make the changes permanent. So, have fun experimenting and picking fonts that make your store stand out!

Things to avoid when selecting fonts

• While Shopify offers a wide range of fonts, avoid common ones and use them everywhere. The idea is to make your store unique; commonly used fonts won’t make your store stand out.
• Don’t choose fonts that are hard to read. Fonts that are too fancy, decorative, or thin lines can be difficult for customers to read on screens, especially on mobile devices. Also, low contrast between the font color and background color can cause strain on the eyes.
• Don’t use too many different fonts on your store’s pages. Stick to a maximum of 2-3 fonts, with one main font for body text and another for headings or accents.
• Use fonts that complement each other visually. Avoid pairing fonts with very different styles, like a super modern font with a very traditional one.
• Your fonts should complement your brand personality. If your brand is playful, a fun font might work well. But a severe brand might want a more classic and professional font.
• When choosing fonts for your store, consider mobile-friendliness. Many people will be browsing your store on their phones, so make sure the fonts you choose are easy to read on smaller screens.

In Conclusion

Fonts are great and should be used wisely to make your store stand out. The right combination of fonts enhances your store’s appearance, can influence your customers, and can increase sales. On the flip side, too many fonts can make your store look cluttered and confusing. The insights provided in this guide will help you correctly combine your fonts and give your Shopify store a unique appearance.

Start Shopify For Only $1 A Month

Sign Up For A Free Trial and enjoy 3 months of Shopify for $1/month on select plans.

Try Shopify free for 3 days, no credit card required. By entering your email, you agree to receive marketing emails from Shopify.

Frequently Asked Questions (FAQs)

1. What fonts can I use on Shopify?

Shopify offers a wide variety of fonts in its font library. On top of that, you can access a collection of Google Fonts and Monotype licensed fonts through Shopify. The font you choose for your Shopify store depends on you and your brand’s personality.

1. Can I add my font to Shopify?

Yes, you can add your font to Shopify by uploading the font into the theme’s assets folder.

1. How do I find the best font combination?

The best way to find the best font combination is to use different fonts within the same font family. A font family has a few variations that work well together.