How to Make Your Store Stand Out with Shopify Fonts

Creating a cohesive and impactful brand image is not an easy task, but it is worth the effort and investment. Using a consistent and on-brand font can make your site stand out while boosting your branding efforts. From typography to colour, there is a lot you can do with this subtle aspect of your site.

In this guide to Shopify fonts, we will look at the importance of fonts, as well as how to add and change normal and custom fonts on Shopify.

The Importance of Fonts on Shopify

Fonts are important in any eCommerce business because getting people to read your content is not an easy task. On average, users only read approximately 30% of the words on a page. So every word counts, and drawing users in is of utmost importance.

Using an engaging font can keep the user on the page for longer, can lead them into your content, and hopefully can guide them to complete the buying process. Fonts, when used correctly, guide the eye from one place to the next, in the order that you intend. In addition to this, using headings and promotional banners with an eye-catching font can pull attention to what you want to promote.

The reverse of the eye-catching aspect is that your font should not be at odds with the rest of your site. Nor should it be in any way tacky or overly attention-grabbing, as this will pull focus from other important aspects of your site. It is a difficult balance that requires an eye for detail and aesthetics. If you struggle with the look and feel of your site, consider reaching out to our design team at Blend Commerce.

The Best Shopify Font Combinations

Remember that when you are selecting font combinations for your Shopify store, it's essential to prioritise readability and brand consistency. Opt for a clear and legible sans-serif font for headlines, ensuring it catches the eye without sacrificing clarity. 

For body text, consider a complementary serif font that enhances readability. Consistency across your website fosters a professional look and reinforces brand identity. Keep in mind to check how your chosen fonts appear on different devices to guarantee a seamless user experience. By focusing on these elements, you'll not only enhance aesthetics but also contribute to a positive and user-friendly interface for your customers.

How to Add Fonts to Your Shopify Theme

Adding fonts to your Shopify theme is straightforward, but knowledge of CSS and HTML is useful. However, if you carefully follow these steps, your new font should be uploaded in minutes. You will first upload the font onto the Assets folder of your theme and then will install the new font to your theme. Here’s how:

• Download the Webfont version of your font. The font files must include at least the WOFF and WOFF2 file types (TTF or OTF are not Webfont file types).

• From your Shopify dashboard, navigate to Online Store > Actions > Edit Code.

• Scroll down to the Assets folder and click Add a New Asset. Select your font file, and click Upload Asset.

• Next, you will install the new font to your theme. Go to your theme's main CSS file, which you’ll find in the Assets folder of your theme - navigate to the bottom of this file to add the new code to your theme.

• Add this code: 

  @font-face {font-family: "Font name";

  src: url({{ "Filename" | asset_url }}) format("Format");

   

• Replace the Font name with the name of the font you have chosen. If the name is made up of more than one word, it will need quotation marks.

• Next, replace the File name with the file you just uploaded, including the extension code. For example verdana_bold.ttf.

• Lastly, replace the Format with that of your font. For example, Athena.ttf would be "TrueType".

How to Add Custom Fonts to Shopify

If you want to make your font unique and eye-catching, a custom font is a great option. This requires a bit of extra effort but is worth the time spent. Follow these steps to upload a custom font:

• As in the tutorial above, Download the Webfont version of your font.

• From your Shopify Admin naviage to Online Store > Themes > and then Actions > Edit Code. In the sidebar choose Assets > theme.scss.liquid. Scroll to the bottom of the file and paste this code:

@font-face {font-family: "NAME OF FONT";

src: url("NAME-OF-FONT-FILE.woff2") format("woff2"),

url("NAME-OF-FONT-FILE.woff") format("woff");}

• As with the above uploading steps, replace the details with your custom font details. Below this code, paste the following code:

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

• Lastly, go to the Assets folder on your Shopify dashboard and click Add a new asset. Upload each version of the font file one by one.

How to Change Fonts on Shopify

If you are happy with the fonts available on Shopify, changing fonts is a lot easier. Since Shopify offers a broad range of attractive fonts, this can be a great option for those who do not already have a brand image. Here is how to change fonts in Shopify:

• From your Shopify admin, go to Online Store > Themes.

• Next to Supply, click Customise and then Theme settings > Typography.

• For each type of text, click Change to use the font picker. This allows you to use multiple fonts.

• If you haven’t chosen a font yet, explore your options in the search field, or by clicking Load more.

• Click the name of the font that you want to use. If you want to change the font to a different style, click the name of the current font style, and then select a new font style from the drop-down menu.

• Click Select and then Save. If you want to ensure that it worked, click Preview. 

You should now see your fonts and typography as you want them to appear. If you are not satisfied, play around a bit to try out different options, sizes, colours, and placement.

Need Help with Your Design?

Published: March 15, 2022

Last updated: October 18, 2024