The Guide to Shopify Fonts: How to Edit & Customize Fonts on Shopify

August 31, 2021
by
Michelle Deery

The Guide to Shopify Fonts: How to Edit & Customize Fonts on Shopify

August 31, 2021
by
Michelle Deery
Get the latest straight to your inbox
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Share on:

Shopify is undoubtedly a leader in the ecommerce space. When it comes to creating a store you can scale, it seems to have it all—the ability to manage multiple channels, fulfillment centers,  payment processors, email marketing—all while keeping stores resilient, fast and capable of handling thousands of transactions per minute.

Yet when it comes to fonts, their out of the box options are decidedly limited. 

While some stores are okay with using basic fonts or whatever comes with their theme, you might prefer custom font options that make your brand stand out. 

But where do you start?

In this guide we dive deep into all things about Shopify fonts, exploring: 

Let’s get started.

Why fonts matter

Fonts evoke specific thoughts, feelings, and behaviors depending on their form—and ultimately play a role in how your audience views your store. 

But how is it that fonts have such a powerful psychological effect? 

For starters, we tend to associate shapes with emotions. More angular fonts can mean a more formal and official tone, while round fonts are effective for expressing feminity and softness.

One study found that memorability increased when businesses were consistent with their typefaces across copy and advertisements. 

Other research suggests that reading speed increases with serif fonts like Times New Roman and Garamond. Newspapers and books make good use of serif fonts since they make long blocks of text easier to read.

An MIT study suggests fonts can have the power to affect your mood and cognitive ability. This can help customers along the buyer’s journey, using fonts to create a positive brand perception that makes all the difference.

All in all, the strategic use of fonts is an opportunity to let your brand’s personality and messaging shine through—whether they’re good or bad choices. If you don’t wisely choose the right font for your brand, you could be unknowingly harming its credibility.

How to find fonts on Shopify

Finding your Shopify fonts is pretty simple once you’ve gotten familiar with Shopify’s editing features. 

However, if you’re new to it all, it just takes a few easy steps:

Step one: Once you’ve logged into your dashboard, navigate to your left-hand menu and click on Online Store > Themes > Customize.

shopify dashboard customize themes

Step two: You’ll be met with your theme’s editing dashboard. This is where you can change the look of your store. 

Though limited, it does come with some useful features, including the ability to add fonts to Shopify. 

On the left-hand menu, scroll down and click on Theme Settings > Typography.

shopify dashboard theme settings

Step three: You’ll find a menu of choices that modify your universal theme settings. Click on Typography > Change to modify your headings, accent text, and body text. 

You can also adjust the font sizes for each text type and change your font weights. 

You’ll probably recognize a lot of popular Shopify fonts already. However, you’ll want to try and create your own combination of fonts to stand out. 

shopify theme typography

Step four: Once you’ve selected your preferred font, at the bottom, click Select > Save. Voila! You’ve modified your Shopify fonts with Shopify’s existing font library. 

As you make your changes, you’ll be able to preview your Shopify theme fonts in real-time. 

shopify dashboard serif fonts

Using the Shopify font library

The Shopify font picker gives you plenty of font choices. 

It lets you sort fonts by Serif, Sans Serif, or Mono types. Don’t let these terms intimidate you. 

Here’s a quick overview of what each means:

Serif: A serif font is a font that has strokes or decorative designs on the end of letters which are the small ends you see on letters from fonts like Times New Roman or Georgia. 

serif font description
Image: Ingenex

Sans Serif: A sans serif font is a font with letters that don’t have those little “tails” or extensions on their ends. They are without “serifs.” Helvetica or the Arial fonts are classic examples of sans serif fonts. 

sans serif font description
Image: Ingenex

Mono: A mono, or monospaced, font is a font created with letters that occupy the same amount of space. 

monospaced font description
Image Ingenex

 Shopify’s typography list is made up of pretty basic fonts that you may have already seen before. 

When you navigate to your Shopify font library, the fonts are already organized into System Fonts and Other Fonts

shopify system fonts vs other fonts

System Fonts are fonts that load faster as they are already installed on a user’s computer, which removes the need of having to download them. 

Other Fonts are fonts that, if used, are downloaded into your user's computer possibly causing slower loading times. 

Why do details like these matter? 

Well, if you’re trying to optimize your ecommerce store to rank in search engines, you need to take into account site speed—an important SEO ranking factor

The faster your site, the more likely it’ll rank higher in search results where your products will be found by more people, and vice versa.

But how exactly does using web fonts come at a performance cost? 

Google Fonts, for example, are hosted from remote servers that get millions of simultaneous API hits, which can delay load times for up to seconds. In fact, each font can add up to 400 kilobytes to your page weight.

Below you can see the time difference it takes for a Google Font (Open Sans) to load in comparison to a systems font (Arial).

web font vs google font page load
Image: KeyCDN

And according to Google, this plays a factor in site speed and bounce rate:

“As page load time goes from one second to 10 seconds, the probability of a mobile site visitor bouncing increases 123%. Similarly, as the number of elements—text, titles, images—on a page goes from 400 to 6,000, the probability of conversion drops 95%.”

However, if SEO isn’t how you primarily market your store, then you don’t have to think too much about whether you’re choosing fonts will affect your rankings. But, keep in mind that they still might affect your bounce rate nonetheless.

Highlights from the Shopify font list

Admittedly, Shopify’s font list can be pretty basic. Below, we’ve listed some of the most useful fonts according to what they’re best for. 

Montserrat: Best for accent text and body copy 

montserrat

Montserrat is the font you can’t go wrong with. 

It’s built with softer edges and no serifs, meaning it’s highly legible and appropriate for a lot of different scenarios. 

Alegreya: Best for adding some flair to your headings

alegreya

Alegreya isn’t a font you see very often, but if paired well, it’s a font that can help make your brand more memorable. 

Open Sans: Best for a classic, approachable feel

open sans

As a classic font that’s great for body copy, Open Sans is another great starting point. 

Open Sans is a sans serif font that can go well with Helvetica, Lato, or Source Sans Pro. 

Quicksand: Best for softer headings and titles

quicksand font

If you’re looking to create headings with a softer, more fun feel, look no further than Quicksand. 

It’s a great header font to create different font combinations with. 

Avenir Next: Best for legibility

avenir next font

Avenir Next is a geometric typeface that looks good on just about everything. It’s a favorite by lots of designers. 

ITC Modern: Best for a professional look

itc modern font

The word “professional” and serif fonts pretty much always go together. 

ITC Modern can work great for a brand that’s looking to create a timeless and trustworthy feel. 

How to add fonts to your Shopify store

There are a few ways to go about adding fonts to your Shopify store. 

Some can be tricky if you’re new to code and may take some time to do correctly. However, there are easier options available, which we will also discuss.

If you aren’t comfortable with code, you can also try using an app like Shogun to get access to more custom fonts without the need for code. 

#cta-visual-pb#<cta-title>Want to add fonts to your store without having to code?<cta-title>Try Shogun fo free to see what fonts you can use for your stunning Shopify store.Start building now

Adding Google Fonts to Shopify

It’s possible to add Google Fonts that you like to your store’s font library in a few steps. 

Step one: Visit the Google Fonts site and choose your font. 

You’ll see that you’re able to filter your fonts by a few different criteria including category, language, font properties, most popular, newest, name, or even trending. 

google fonts categories sort by menu
Image: Google

Step two: Once you click on the font of your choice, you can adjust the font size, check out the glyphs, the License, and even what other fonts it pairs best with. 

Take some time to play around with it to see what is the best font to use for your Shopify store. 

google fonts rampart one font size

Step three: Once you click the “Select this style” button, you’ll be able to copy the code from the pop-up window. 

google fonts embed font style css rules

Step four: Once you’ve copied your code, from your Shopify dashboard, navigate to Online Store > Themes > Actions > Edit Code. 

shopify dashboard theme edit code

Step five: Click on Layout > theme.liquid. 

From there, scroll down and find the </head> tag and paste the code inside the tag. Save your changes once you’re finished. 

shopify editing css code

Step six: Next, go to the "Assets" folder. You will find the two style files named "theme.scss.liquid" and "timber.scss.liquid". Open them.

shopify edit code assets

Step seven: Go back to the page of the Google Font you are using. There you will need to copy the font name, in my case, it’s “Rampart One', cursive;”.

google fonts css rules

Step eight: And then finally, go back to the previous style files that you opened in the Assets folder.  Scroll down to "Typography" section and replace these 3 code lines:

$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: 'Rampart One', cursive;

$bodyFontStack: 'Rampart One', cursive;

$accentFontStack: 'Rampart One', cursive;

shopify themes edit font code

Now, for the easier way of using Google Fonts.

Using Google Fonts in Shogun

If you don’t want to go through the process of manually adding a Google Font to Shopify, there’s an easier way to go about it—Shogun Page Builder. 

With Shogun, adding any Google Font to your Shopify store literally takes one step since it already has all of Google’s Fonts pre-installed. 

We aren’t exaggerating either. 

It’s as easy as clicking on a heading, opening the font drop-down menu, and taking your pick of fonts until you’re happy with the results.  

shogun page builder editor font choice

How to add custom fonts to Shopify

You might have come to a point where you’re interested in using Shopify custom fonts. 

Installing them requires advanced coding skills and you’ll need to pay close attention so that your store isn’t damaged in the process. 

Below, we take you through it step-by-step.

Step one: First find and purchase the third-party font you want to use and make sure you get it in certain file types like EOG, SVG, TTF, WOFF, or WOFF2. 

Then, from your Shopify dashboard, navigate to Online Store > Themes > click Action > Edit Code. 

shopify dashboard theme edit code actions

Step two: You’ll be met with a simple dashboard. 

It’s always a good idea to get a bit familiar with the menu options so you feel confident navigating the different settings. 

From here, scroll down and click on Assets > Stylesheet.css.liquid on the sidebar.

Step three: Now, here’s where it might get a little overwhelming. 

Be careful not to edit any of the existing code you see on the screen. On the sidebar, click on Assets > Add New Asset > Upload to upload your font files.

upload asset shopify theme code css

Step four: Navigate to Assets then open theme.liquid.css. Once there, carefully navigate to the bottom and copy and paste 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");

}

css code shopify theme edit

Step five: Inside the code you just pasted, 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). 

Step six: 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; }

Step seven: When you’re all finished, make sure to Save your changes.

Congrats! Your font has successfully been added to Shopify. If you want to upload multiple fonts, you need to do so one by one.

Not terribly easy but you’ll have a deep sense of pride once you’ve accomplished it.

Integrating custom fonts with Shogun

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

Then you can use it throughout your store as a header or body copy. Just three easy steps this time.

Step one: First, go ahead and open the Shogun app and click on the Settings icon. 

shogun page builder settings

Step two: Next scroll down to the Add Custom Fonts field and enter the name of the font. 

This field is case-sensitive and you’ll want to make sure that hyphens, underscores, and all additional characters are correct for the font as well. 

Once you’re finished with that process, click on Add Font.

shogun page builder add custom fonts

Step three: And there you have it. Now, you’ll find that your custom font is now included in the font dropdown menu of the text editor. 

It’s as easy as that. That wasn’t even a real third step!

With Shogun, you can do this for as many fonts as you need pretty seamlessly without ever breaking a sweat. 

shogun page builder editor change font

Even more fonts to choose from with Shogun

Shogun also provides you with a number of different font options that you won’t get with Shopify. 

In other words, it makes the process of finding fonts for Shopify easy—to help build out your store’s pages quickly and to your brand’s style. 

Here’s a quick overview of a few. 

Creepster

This spooky font is perfect for the Halloween section of party stores, and any store can use 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 can even use it for your store’s title in lieu of a logo. 

Press Start 2P

How to change Shopify fonts with the easy way 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. You don’t have to be limited to Shopify’s basic customization options

Shogun’s easy-to-use interface lets you pick from a number of exciting (and boring) fonts. 

It comes with Google Fonts already installed, so you don’t have to worry about editing code or hiring a developer.

In fact, its text editor includes almost every single one of the 1052 fonts in the Google Fonts library so you don’t have to manually install them. 

To access and change these fonts:

After signing up for Shogun, select the Apps option in your Shopify dashboard and select the Shogun app. 

shopify dashboard apps shogun page builder

Select a page, or select Add Page and either select a template or start with a blank page. Make sure you name your page. 

shogun page builder choose page template blank template

Double-click on the text box you want to edit and highlight your text. Search or scroll through the available fonts. Select the font of your choice and Save your changes. 

shogun page builder font chooser heading

The fun doesn’t stop there. You can also easily adjust your font heading type, font size, line height, text color, alignment, or letter spacing. 

shogun page builder heading type font size color line height

Want to see what your fonts will look like on different screens? Try Shogun’s View feature to see it on different screen sizes. 

shogun page builder responsive screen size selector

#cta-visual-pb#<cta-title>Want to customize your Shopify fonts?<cta-title>Change your fonts size, color, line height, and more with Shogun’s customization options.Get your free trial today  

What are the best Shopify fonts for your store?

As you experiment with Shopify fonts, you might be wondering which ones are the best for your store’s pages

It’s an important question to ask and the answer depends on a few factors:

  • What’s your brand’s overall message and personality? 
  • What image are you trying to craft to reel in your target audience? 
  • What are your brand values?
  • What feelings are you trying to evoke in your audience?

It’s questions like these that can help point you in the right direction. 

For example, studies have shown that serif fonts are generally ranked as more “practical” and “mature”.

Here are some more tips to help you choose custom fonts for your Shopify store:

Choose your ideal font weights

When you’re choosing your fonts, there are different weight options to pick from. 

For example, take a look at all the font weights there are for the Urbanist font.

font weights urbanist

Different weights can suggest different brand personalities. 

You usually associate thinner and more stylized fonts with modernism, minimalism, and elegance. 

However, as your fonts get thicker, you realize that they start to look a bit more informal, loud, and even extroverted.  

Consider leveraging color psychology

Here’s something you might not have thought about before—color psychology. 

Color has a profound effect on brand perception. When you pair the right colors with the right fonts it can make for a powerful brand experience. 

So much so, that some brands have even trademarked their own signature colors. 

Research has found that up to 90% of how we judge people or products is based on color alone. You might be wondering what colors it’s best to stay away from. 

A study suggests that the least favorite color for both male and females is brown, yellow, and orange. 

Pairing color combinations with a sound font strategy can make for powerful brand recall. 

Consider taking the time to experiment with font colors as well. Use a tool like Coolors to play around with color combinations.

Choose either complementary or contrasting fonts

Complementary font pairings play off each other without too much friction or difference between them. 

For example, you can use a heading font in bolded format and use the same font in a regular font weight as a pairing. This implies harmony and balance. 

On the other hand, there are contrasting font pairings to consider. These are two fonts that differ a lot from each other in shape, thickness, style, or alignment. 

A popular contrasting font combination is to use a sans serif font as your main font while using a serif font as the supporting font. 

4 Shopify font pairings that work well together

We couldn’t end this guide without giving you a few pointers in the font pairing department. 

  1. Playfair Display and Source Sans Pro
playfair display source sans pro pairing
Image: FontJoy

If your store sells beauty products or women’s dresses then Playfair Display’s delicate, high-contrast strokes work great on titles—and headlines will work well with Source Sans Pro’s clarity. 

  1. Montserrat and Roboto
montserrat roboto pairing

Not all fonts go well together, but the contrast between Montserrat’s heavy bold and Roboto light text is a winning combo for stores that sell electronics or industrial parts. 

  1. Overlock and Nunito
overlock nunito pairing

Overlock looks great when used for titles and short texts, it balances Nunito which is more rounded. The pair work great together for a store that sells clothing.

  1. Dancing Script and Lato
dancing script lato pairing

Dancing Script is a solid font that stands boldly wherever it’s placed and Lato is a perfect compliment. They would work great together for a postcard and gift shop.

You can also use the Google Fonts Pairings feature. It lets you get a visual of what popular pairings look like. 

google fonts pairings

Shogun gives you more Shopify font options 

Adding custom Shopify fonts can be done in many ways. 

Using a tool like Shogun is the easiest way to manage all your font needs, whether you’re uploading custom fonts or going with Google Fonts. 

Most importantly, it helps you avoid the danger of damaging your store by removing the need to edit your theme’s code.


#cta-visual-pb#<cta-title>Inspired to find your perfect Shopify fonts?<cta-title>Customize more than just the fonts in your Shopify store and make your brand unmissable.Start building for free 




Michelle Deery

Michelle Deery is a writer and strategist for B2B SaaS companies. She writes content that helps brands convert visitors into paying customers.