How to Add Fonts to Shopify

Attractive fonts do more than just improve the appearance of your Shopify store. They can improve your sales figures, too. 

According to a paper published in the Journal of Research Psychology, your font choice affects the memorability of the claims you make in your advertising copy. Font also affects user experience.

Consider for a moment that the average visitor only reads 28% of the words on a page after they land on a site. 

Words read on page by user chart
Image Source: Nielsen Norman Group

How do you convince your visitors to keep clicking through instead of backing out?

People are only reading a quarter of the content you publish, so every word counts. Well-written content is helpful, of course, but the way your content is presented is just as important. 

Everyone knows walls of texts turn people away. You need to break up your content in order to keep visitors stimulated. Otherwise, many of your visitors will get overwhelmed by all the crowded text on your page and look elsewhere for a more digestible alternative. 

The same logic applies to your fonts. Using the same dull font throughout your site makes it more difficult to keep visitors engaged. Conversely, livening up your content with a creative use of interesting fonts will help you hold the visitor’s attention and encourage them to stay on your site for longer periods of time. 

The longer people stay on your site, the more likely it is that they’ll buy something. Also, there’s a correlation between time on site and search results position.

time on site vs. organic position chart
Image source: Moz

To understand why time on site influences your search rankings, think about it from the search engine’s point of view. Search engines make their money through advertising, and they must maintain a high level of traffic to keep the ad dollars flowing in. 

That means their users have to be satisfied with the results they’re getting. Otherwise, users will migrate to some other service that offers better performance, and the audience that the search engine can offer to advertisers gets smaller and less valuable. 

This explains why Google believes that time on site is such a significant factor when ranking search results. If someone selects a search result and then spends a lot of time on the site, that indicates that they were satisfied with the result. But if they click through and then almost immediately back out, they likely weren’t satisfied.  

So, you need to do whatever you can to increase your average time on site, as this leads to more traffic to (and therefore, more revenue from) your Shopify store. The font on your site might seem like a small detail, but it can have a big impact on your bottom line.

The Shopify Font Library

Before you search for a custom font to add to your store, are you sure that Shopify doesn’t already have what you’re looking for? The Shopify font library provides you with dozens of options for your store. To browse through all the standard fonts on Shopify:

1. After logging in to your Shopify account, go to “Online Store” > “Themes.”

After logging in to your Shopify account, go to “Online Store” > “Themes”
Image source: Shopify

2. Select “Customize.”

Select “Customize”
Image source: Shopify

3. Select “Theme settings.”

Select “Theme settings”
Image source: Shopify

4. Select “Typography.”

Select “Typography”
Image source: Shopify

5. Select “Change.”

Select "Change"
Image source: Shopify

6. Use the Shopify font picker to search or scroll through the available fonts.

Use the Shopify font picker to search or scroll through the available fonts
Image source: Shopify

7. If you find one you want to use, click on the “Select” button. 

If you find one you want to use, click on the “Select” button
Image source: Shopify

8. Select “Save” to confirm your changes. 

Select “Save” to confirm your changes
Image source: Shopify

Shopify Font Library Highlights

The right font for you depends on your brand. What works well for one store won’t necessarily work for another. For example, a cursive font might be fine for a flower shop, but it likely wouldn’t look good on the homepage of a medical supply store. 

The Shopify font library contains excellent choices for all types of stores, including:

Georgia Pro

This is the main font used by the New York Times. It’s easy to see why the country’s paper of record has chosen Georgia: it’s characterized by a certain kind of simple grace; it’s pleasing to the eye without drawing too much attention to itself. That gives it a universal quality that works for many different sites. 

Georgia Pro is also ideal for stores associated with news or literature that want to mimic the highbrow vibe of the Times. 

Georgia Pro

Roboto

Like Georgia Pro, Roboto is a clean, legible font that doesn’t look out of place anywhere. It does have a more modern appearance than Georgia Pro, which has made it a favorite for technology sites. 

Roboto

Waza

Waza is a cursive font, so it sacrifices some legibility for additional style and elegance. Anyone who wants to add a feminine touch to their store will be happy with Waza. 

Waza

Shadows Into Light

Shadows Into Light looks like it was drawn by hand. It’s a good fit for stores that sell crafts or handmade goods. 

Shadows Into Light

Righteous

If your store specializes in vintage counterculture apparel, you should find the Righteous font particularly groovy. 

Righteous

Expand Your Font Options with Shogun

By combining Shopify with the Shogun Page Builder app, you will have much more control over the appearance and functionality of your pages. 

Shogun is a drag-and-drop page builder. With its easy-to-use interface, you can customize the arrangement of elements on the page down to the last pixel. It allows you to make whatever kind of page you want, and it significantly reduces the amount of time it takes to create pages. 

With Shogun, you have lots of font options for your site. In fact, its text editor includes almost every single one of the 923 font families in the Google Fonts library. To access these fonts:

1. After purchasing Shogun or signing up for the 10-day free trial, select the “Apps” option in your Shopify dashboard.

After purchasing Shogun or downloading the 10-day free trial, select the “Apps” option in your Shopify dashboard
Image source: Shopify

2. Select “Shogun Page Builder.”

Select “Shogun Page Builder”
Image source: Shopify

3. Select a page. 


Select a page
Image source: Shopify

4. Double-click on the text box you want to edit.

Double-click on the text box you want to edit
Image source: Shopify

5. Search or scroll through the available fonts. 

Search or scroll through the available fonts
Image source: Shopify

6. Select the font you want (make sure the text is highlighted). 

Select the font you want (make sure the text is highlighted)
Image source: Shopify

7. When you are done or have reached a stopping point, select “Save.”

When you are done or have reached a stopping point, select “Save”
Image source: Shopify

8. When you’re ready to publish, select “Publish.”

When you’re ready to publish, select “Publish”
Image source: Shopify

Shogun Font Highlights

Here are a few of the font options you get with Shogun that aren’t provided by default with Shopify:

Creepster

This spooky font is perfect for the Halloween section of party stores, and any store can utilize it for Halloween-themed sales or promotions.  


Creepster

Eagle Lake 

Eagle Lake pairs well with stores that sell jewelry, designer watches, or other luxury items. 

Eagle Lake

Faster One

This font is an obvious match for any sort of automotive store, and it can help you highlight products that are fast in other ways (fast computers, fast-drying paint, etc.). 

Faster One

Finger Paint

What school supply store wouldn’t want a font that looks like it was made by the students themselves? Toy stores and clothing stores with kids sections can also make good use of this font.

Finger Paint

Press Start 2P

This gaming-themed font is so stylized that you could even use it for your store’s title in lieu of a logo. 

Press Start 2P

How to Add Font to Shopify

If you’re not satisfied with your standard Shopify font options or what’s available on Shogun, you can manually add font to Shopify. This process does involve adjusting the code of your theme, but don’t worry — you don’t need to be an experienced web developer to pull this off.

Follow the steps below and you’ll be fine:

1. Download the third-party font you want to add to your site. For this example, we’ll use the League Spartan font from The League of Movable Type


Download the third-party font you want to add to your site
Image source: League Spartan

2. Confirm that you’re downloading webfont file types, such as EOG, SVG, TTF, WOFF, or WOFF2. Other file types would have to be converted before you can continue. If you’re downloading a ZIP file of the font, look for a subfolder titled “Webfonts” or something similar. 

Confirm that you’re downloading webfont file types, such as EOG, SVG, TTF, WOFF, or WOFF2
Image source: League Spartan

3. Next, we need to edit the code of the theme we’re adding the font to. Note that when edits to the code have been saved, they can only be reversed manually. That can get you into trouble if you’re not being careful. 

So, you should duplicate your theme and make your changes in the duplicate. That way, if you make a mistake you can easily start over by duplicating the original again. 

Duplicate your theme
Image source: Shopify

4. Open the “Actions” menu next to the duplicate of your theme and select “Edit Code.”

Open the “Actions” menu next to the duplicate of your theme and select “Edit Code”
Image source: Shopify

5. Select “Add a New Asset.”

Select “Add a New Asset”
Image source: Shopify

6. One by one, upload your webfont files (unfortunately, there’s no way to bulk upload). 

One by one, upload your webfont files (unfortunately, there’s no way to bulk upload)
Image source: Shopify

7. Open “theme.scss.liquid.”

Open “theme.scss.liquid”
Image source: Shopify

8. At the bottom of the file, add the following code:

@font-face {
  font-family: "FONT";
  src: url('{{ "FONT.eot" | asset_url }}');
  src: url('{{ "FONT.eot" | asset_url }} ?#iefix') format("embedded-opentype"),
       url('{{ "FONT.woff" | asset_url }}') format("woff"),
       url('{{ "FONT.woff2" | asset_url }}') format("woff2"),
       url('{{ "FONT.ttf" | asset_url }}') format("truetype"),
       url('{{ "FONT.svg" | asset_url }} #FONT') format("svg");
}

Replace “FONT” with the name of your font, and remember to include any hyphens or underscores in the name so that it’s an exact match. 

You may need to add or remove lines from this chunk of code depending on the file types that you’re uploading (for example, if you’re not uploading a woff2 file, remove the woff2 line completely). 

Add the code
Image source: Shopify

9. Directly below that code, add the following code for the types of text you want to change. In this example, we’ll be changing the headers, but you can add whatever types of text you want to change to this line of code (click here for a guide to CSS font). And again, replace “FONT” with the name of your font: 

h1, h1 a, h2, h2 a, h3, h3 a, h4, h4 a, h5, h5 a, h6, h6 a, #nav li a, div.title a, .headline, .subtitle { font-family: 'FONT' !important; }

Add the code
Image source: Shopify

10. When you’re done, select “Save.”

When you’re done, select “Save”
Image source: Shopify

11. Replace your current theme with the duplicate of the theme to publish your changes. You can also rename the duplicate at this point. 

Replace your current theme with the duplicate of the theme to publish your changes. You can also rename the duplicate at this point
Image source: Shopify

Integrating Custom Font with Shogun

After you’ve added the font to your theme, you’re only a few steps away from integrating it with Shogun Page Builder:

1. Open the Shogun app and click on the “Settings” icon. 

Open the Shogun app and click on the “Settings” icon
Image source: Shogun

2. Scroll down to the “Add Custom Fonts” field and enter the name of the font. This field is case-sensitive, and you must make sure that hyphens, underscores, and all additional characters are correct for the font as well. Then, select “Add Font.”

Select “Add Font”
Image source: Shogun

3. You’ll find that your custom font is now included in the font dropdown menu of the text editor. 

You’ll find that your custom font is now included in the font dropdown menu of the text editor
Image source: Shogun

Other Text Considerations

Font isn’t the only thing you should consider regarding your text. In addition to your choice of font, keep these aspects in mind when customizing the text on your site:

  • Size: Switching up the size of your text makes pages more dynamic and visually interesting. Also, increasing the size of important text and decreasing the size of less important text improves readability. 
  • Color: Using text colors that match or complement the color of your logo and other branding elements will make your site look more professional. 
  • Contrast: When changing the color of your text, you must account for the color of the background that’s behind the text. Light yellow text against a white background will be difficult to read. That same text against a dark background has the potential to really pop. Consider using a blur effect on the background to heighten contrast if necessary.

Fonts Offer Another Way To Set Yourself Apart and Outclass the Competition

There’s a lot of competition out there. Many other stores sell what you sell, and you’re all competing for the same pool of customers. It’s a zero-sum game. You need every advantage you can get. 

An eye-catching font is one such advantage. Shopify offers a wide selection of fonts out of the box, and you can expand your selection with the Shogun page builder and custom fonts. You should leverage this opportunity to improve your site and your search rankings. 

Build Shopify pages that convert.

Create professional-quality pages for your ecommerce store with a powerful drag and drop page builder for Shopify designed with ecommerce teams and agencies in mind.
Start Your Free Trial

Adam Ritchie

Adam Ritchie is a writer based in Silver Spring, Maryland. He writes about ecommerce trends and best practices for Shogun. His previous clients include Groupon, Clutch and New Theory.