How to Add Custom Font to Shopify 

A cohesive and impactful brand image can drive growth in businesses of any size and type. A consistent brand identity is necessary if you own an eCommerce business like Shopify. Using a consistent and personalized font can make your website stand out from the rest. From typography to color, there is enough room for you to shine and create a visually appealing online store. Are you wondering how to add custom font to Shopify? In this guide, we will look at the importance of fonts and how to add and change traditional and custom fonts on Shopify. 

Making a Backup Copy of your Shopify Theme 

Before starting the font customization process, ensure you have a backup of your current Shopify theme. If you face any issues, you can quickly revert the theme if you have a backup file. Here’s how to do it: 

Add the font files to your store

Once you are done saving the backup file, you are ready to add the fonts to the Shopify store. Then, you use it in your theme through a set of codes. 

• From your Shopify admin panel, go to Content > Files > Upload Files. 

• Click on Upload Files at the top right option of the page and upload your preferred font files. Web Font files are those with the following extensions: .tff, .woff, .woff2, .eot, .svg, or .otf. 

Source: efzycode.com

• It is best to upload all font files in the .zip folder, or at least the files you want best. 
• Once you have uploaded the font files, add some code to read them. 
• Return to your Shopify admin and navigate to Online Store > Themes > Actions > Edit Code. 
• Continue scrolling down until you find the Assets folder. Then hit the Add a New Asset option. Choose the desired font file, and click Upload Asset.
• After that, install the new font into your Shopify theme. Open your theme’s main CSS file in the Assets folder. Scroll to the bottom of this file, then paste the new code.
• Add this code “@font-face {font-family: “Font name”;src: url({{ “Filename” | asset_url }}) format(“Format”);”
• Change the Font name with the name of the font you have chosen. If the name comprises more than one word, make sure to add quotation marks.
• Then, change the File name with the new file uploaded, including the extension code, for example, verdana_bold.ttf.
• Finally, replace the Format with that of your font. For example, Athena.ttf would be “TrueType.”

How to change fonts on Shopify

If you are satisfied with the fonts available on Shopify, changing fonts is easier. Since Shopify offers plenty of attractive fonts, this can be an excellent opportunity for those who still need to build a brand identity. Below are the steps for changing fonts in your Shopify theme. 

• Go to Online Store > Themes on your Shopify admin panel.
• To Supply, select Customize, then Theme Settings > Typography.
• It is best to know that for every type of text, you should click Modification to use the font selector. This allows you to use multiple fonts.
• If you haven’t chosen a font, explore your options in the search field or click the Load more option.
• Next, click the name of the font that you prefer. If you want to replace the font with a different style, just select the name of the current font style and then choose a new one from the drop-down menu.
• Then, hit Select and Save. You can click Preview if you want to check if your selection worked.
• At this point, you should see your fonts and typography just as you want them to appear. If you are not happy, experiment with more combinations to try out different options, sizes, colors, and placement.

How to Add Custom Font to Shopify’s Specific Elements

If you want to use your custom font only for particular elements, you can utilize the “CSS Selectors” and add your selector there. Below are the steps on how to find your website’s CSS selector. 

• While on the page containing the element whose font you wish to change, press CRTL + shift + c to open your browser’s developer tools in inspection mode. If you’re using a Mac, that’s CMD + shift + c instead.
• Find the text you want to change the font of and click it. Doing this step lets you highlight the element in the HTML.
• Next, right-click the element in the HTLM, go to “Copy,” and click “Copy selector.” This will copy a CSS selector meant to target this exact element.
• Once you have your CSS selector, copy and paste it at the very bottom at “CSS Selectors.”

Remember that this is a hard-coded technique dedicated to selecting a single element. Changes to your store’s HTML code, especially to portions where the font was modified, can cause it to stop working. 

If something like that happens, you can re-code this part of the tutorials or use a broader CSS selector. You can do it as many times as you want for specific elements. 

Why Fonts on Shopify and other eCommerce Websites are Important

Fonts are essential in the design and enhancing user experience of Shopify and other eCommerce websites. Choosing the right fonts can encourage people to read your content and avail of your products or services. 

Using an engaging font has several benefits, including the following: 

• Readability: The right font choice ensures that product descriptions, reviews, and other essential content are easily read. It directly impacts the user’s ability to engage with your site.
• Aesthetics: Fonts contribute to the overall visual appeal of the website. Well-chosen fonts can make the site look more modern, professional, or even fun, depending on the brand’s goals.
• User Experience: Different fonts convey different emotions and can impact the user experience. For example, a sleek, minimalist font may create a different feeling than a playful, decorative one.
• Hierarchy and Emphasis: You can use fonts of varying sizes and styles to guide the user’s attention. Product names, prices, and calls to action can be emphasized through font choices.
• Mobile Responsiveness: Fonts must be carefully chosen to display well on mobile devices with limited space. Responsive fonts can improve the mobile shopping experience.
• Loading Speed: The choice of fonts can impact page loading times. More complex fonts or too many font styles can keep your site from being manageable, affecting user experience.
• Search Engine Optimization: While not a direct factor, font usage can indirectly influence SEO. Well-optimized fonts contribute to a better user experience, which, in turn, can positively impact your site’s search engine rankings.

FAQs

1. Can I add my font to Shopify?

Yes. To get started, you must upload the font into the theme’s assets folder. Then scroll down until you find the Assets folder, click Add a new Asset, select the font file, and click Upload Asset. 

2. How do I import custom fonts to Shopify?

To import custom fonts to Shopify:

1. Download the font files.
2. If the font files are in a .zip folder, unzip them by right-clicking and then hitting Extract.
3. Right-click the fonts you can and click Install. 

3. Is there a limit on the number of fonts in a Shopify store?

Use up to three fonts on your Shopify store. Limiting yourself to two or three fonts and sticking with them throughout your design is best. Using more than three typefaces might distract or create confusion among readers. It can also reduce the chance of converting them into customers. 

4. What is the best font combination?

While there are no clear rules about the best font combination for a website, it is best to stick to just one font style. When pairing fonts, look for ones that complement each other and work together without becoming boring. 

5. How do you find the perfect font combination?

The easiest way to find the perfect font combination is by using different fonts within the same font family. For example, a font family is something like Helvetica, and its fonts have a few variations. Fonts from the same family are already an assortment of weights and styles that work well together.  

6. I never worked with fonts before. Please give me a hint on working with font customization.

If you have never worked with fonts, here are a few basic styles or text available. 

• Serif: This font family includes Times New Roman and Georgia which have little feet on each letter.
• Sans serif: These typefaces do not have the little feet like Arial, and Helvetica.
• Script:  Font under this style includes anything that looks like calligraphy or handwriting.
• Monospace: Fonts under this category have all equally spaced letters and are what you usually see in computer code. A good example is Roboto Mono.

Conclusion

Custom fonts are excellent. If fonts are used correctly, they can guide the eye from one section to another on your Shopify website. Likewise, headings and promotional banners with eye-catching font can attract attention to what you want to promote.

On the flip side, your font should not be at odds with the rest of your website nor in any way tacky or overly catches attention. It might draw attention to not-so-important aspects of your Shopify website. If you need assistance balancing your site’s look and feel, consider reaching out to our design team at Penji.