September 12, 2022
How to add fonts to Shopify Theme is such a constructive topic for any brand. Creating a brand image and setting the stage for it to make a huge impact is a task so Byzantine but the end result speaks volumes about your brand value. Finding the right font for your Shopify site is one of the primary ways to enhance your branding efforts.
This how-to-guide is aimed at helping you know the importance of fonts and the different ways to find, change, and add custom fonts to your Shopify store. Lets get started!👇
Shopify fonts are a collection of fonts found in the Shopify font library. It encompasses system fonts, a selection of Google fonts, and licensed fonts from Monotype. All these fonts are free to use on all Shopify online stores and are provided in both Web Open Font Format (WOFF) and Web Open Font Format 2.0 (WOFF2).
Shopify Fonts are grouped under two categories:
System fonts are the default fonts available on the user's computer. These fonts enable the theme to be more performant as there is no need to download fonts before rendering text. System fonts are found under the System fonts category and are listed under available fonts, noted with a system badge of the theme editor font picker.
Choosing system fonts that are used to render text depends on the user’s operating system. The three generic system font types are:
Custom fonts are the ones that are used by third-party solutions. Klaviyo custom fonts are great for Email templates.
Including fonts in your theme using third-party font solutions can be done in two ways:
If you include custom fonts in your theme, then you have to create a setting for the selection, such as a select setting. The next step is to reference the setting value in your CSS while defining which font to use for the associated elements.
Building an e-commerce site includes determining the minimum interaction cost. This is to determine if the website content is worth reading. A recent study by the Nielsen/Norman group found that users only read 28 percent of words on a page at most on average. This varies depending on the amount of copy on the page but with most people spending an average of 15 seconds on a web page, every word is accountable.
So fonts are essential to keep users engaged. Using the right fonts can help you improve your conversion rates by encouraging the users to stay longer, long enough to get them through the buying process.
You can add fonts to the Shopify theme in the following ways:
Follow these steps carefully and your new font can be uploaded in a few minutes. Begin by uploading the font onto the Assets folder of your theme and then install the new font to your theme.
Here are the steps:
font-family: "Font name";src: url({{ "Filename" | asset_url }}) format("Format");
This is how you can edit TTF files online.
If you want to stand out from your competitors and increase your engagement rate, adding custom fonts to your Shopify store is a great way. However, this requires a good amount of coding skills, so please pay close attention to not mess up anything.
Here's how you add custom fonts:
@font-face {font-family: "NAME OF FONT";
src: url("NAME-OF-FONT-FILE.woff2") format("woff2"),
url("NAME-OF-FONT-FILE.woff") format("woff");}
<p><span style="font-weight: 400;">yourcssselectorhere { font-family: "NAME OF FONT"!important; }</span></p>
You can filter the fonts by the different categories available, including category, language, font properties, most popular, newest, name, and trending.
Change font size in Shopify, check out the glyphs, and the License, and check what other fonts it can be paired with.
After finding the right font, click the “Select this style” button and then, copy the code from the pop-up window.
After copying the code, from your Shopify dashboard, navigate to Online Store > Themes > Actions > Edit Code.
Now, click on Layout > theme.liquid.
Scroll down and find the </head> tag and paste the code inside it. Now, save the changes.
Go to the "Assets" folder. Navigate the style files "theme.scss.liquid" and "timber.scss.liquid"
Open them.
Now, go to the Google Fonts page and then copy the font name. In our case, we used “Roboto', sans-serif;”.
Head back to the previously opened style files in the Assets folder. Scroll down to the "Typography" section and then 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: 'Roboto', sans-serif;
$bodyFontStack: 'Roboto', sans-serif;
$accentFontStack: 'Roboto', sans-serif;
Now, save both files.
Shopify has a wide range of fonts to choose from. Change fonts in Shopify by following these steps:
The preview shows how your fonts and typography appear. You can finalize it if you are satisfied with the outcome, if not, play around a bit to try out different options, sizes, colors, and placements.
Don’t make the process of selecting fonts complicated. Clubbing fonts together must be kept simple and unanimous. Doing this otherwise will make it complicated for the reader. A combination of fonts from different font families will turn out to be a distraction.
Avoid any font that compresses, stretches, skews, or manipulates the proportion of fonts.
Comic Sans or Papyrus fonts are not considered professional anymore because of overusing these fonts. So stay away from these fonts to avoid making your brand look fake.
Here are five free fonts and typefaces to choose from that would be great for your Shopify store.
Avenir is a simple, modern, minimalist style font. It is also highly geometric and suitable for long blocks of text, perfect for primary, secondary, and even accent fonts.
Garamond is a refined, sophisticated, and elegant serif typeface like Garamond. The Adobe Garamond Pro is standard in almost all computers and is great as a primary or secondary font.
Haettenschweiler has a heavy typeface and is the best suitable for creating a solid primary font for banners and titles. It won't be a great option for a secondary font as it's challenging to read for extended text but pops off the page for a larger copy.
Bodoni is like a combination of serif version typefaces with an aggressive outlook, which makes it best for secondary fonts. A classic Bodoni typeface gives a luxurious appeal to headers, titles, and accents. This is one reason that magazines and brand logos have this typeface.
Mistral is a classic typeface with a good script that is suitable for titles and accent fonts but not for secondary fonts. It is a simple and easy-to-read typeface because of its clean and clear outlook.
First, you need to upload it to Assets.
Go to Layout > theme.liquid and add the code:
@font-face {
font-family: 'fontname';
src: url('{{ 'fontname.woff' | asset_url }}') format('woff'),
font-weight: normal;
font-style: normal;
font-display: swap;
}
In the end, you just need to get a fontname, it will work fine.
1. Go to Online Store > Theme > Edit code
2. Asset > theme.scss.liquid or theme.css > upload your custom font file.
3. Now paste the following code at the bottom of the theme.scss.liquid or theme.css file.
@font-face {
font-family: 'custom-fontname';
src: url('{{'custom-fontname.eot?' | asset_url }}');
src: url('{{ ''custom-fontname.eot??#iefix' | asset_url }}') format('embedded-opentype'),
url('{{ ''custom-fontname.woff' | asset_url }}') format('woff'),
url('{{ ''custom-fontname.ttf' | asset_url }}') format('truetype'),
url('{{ ''custom-fontname.svg#'custom-fontname' | asset_url }}') format('svg');
font-weight: normal;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: antialiased;
}
Adding a custom font to your Shopify theme can be an overwhelming task but with this guide, we tried to make things as simple as possible. A custom font will give a unique appearance to your Shopify store. Moreover, using the right combination of fonts can influence your customers and increase sales.
Fonts can draw the attention of customers towards the items that you want them to focus on. Hope our guide on how to add fonts to Shopify themes provided some value to you. But if you want to add more value to your Shopify store, consider subscribing to our newsletter.
Happy growing!
Also read:
Stay in touch to receive our in-depth blogs, updates to grow your Shopify startup.