How To Add and Edit a Custom Fonts to Your Shopify Store?

By Bhavesha | June 25, 2022 | 5 min read

Overview

This is a tutorial for uploading fonts to Shopify. In this tutorial, we will show you how to add custom fonts to Shopify. Shopify custom fonts and Shopify font changes are some of the useful information you’ll find here. ensure success by following the steps exactly.

You Can Add Fonts to Your Shopify Store By Following These Steps

A few methods exist for adding fonts to your Shopify site-

1. How to Add Google Fonts to Shopify

Google Fonts can be added to your store’s font library in a few simple steps.
Step 1: First, Find Fonts that you want
To choose a font, visit Google Fonts.
A few different criteria can be used to filter fonts, including category, language, font properties, font size, and trending options like newest, most popular, name, oldest, and trending.
first-find-font
Step 2: Choose Font that You Want
Once you click on the font like “Roboto Regular 400” Select the font size “28px”.
The pop-up window will allow you to copy the code once you click the “Select this style” button.
Step 3: Edit your theme files and paste the code
From your Shopify dashboard, navigate to Online Store > Themes > Actions > Edit code.
Go to the theme.liquid file. Find the tag and paste the code inside. Once you are done, save your changes.
edit-theme-file
Example Code: 
<link rel="preconnect" href=" https://fonts.googleapis.com">
<link rel="preconnect"href="https://fonts.gstatic.com"crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
Step 4: Go to your theme’s style files
In the “Assets” folder, you will find a style file named “theme.scss.liquid”.

Specify the according CSS rule:

font-family: ‘Roboto’, sans-serif;

2. Add Custom Fonts to Shopify

The following steps will guide you through the process.
Step 1: Find your third-party font
The first step is choosing the font you want to use and ensure you get it in a specific format, such as EOT, SVG, TTF, WOFF, or WOFF2.
To make changes to your code, navigate to Online Store > Themes > Edit Code.
Step 2: Find your stylesheet in Assets and upload your fonts
From here, scroll down and click on Assets  >Stylesheet.CSS.liqud on the sidebar.
To upload font files, click on Assets > Add New file > Upload
Step 3: Paste the following code into theme.css.liquid
Navigate to theme.css.liquid in Assets. Add the following code to the bottom.
Example code:
@font-face {
font-family:”Roboto”;
src: url( {{ 'roboto-light-pro.eot' | asset_url }});
src: url( {{ 'roboto-light-pro.eot?#iefix' | asset_url;}})format("embedded-opentype"),
url( {{ 'roboto-light-pro.woff' | asset_url;}})format("woff"),
url( {{ 'roboto-light-pro.woff2' | asset_url;}})format("woff2"),
url( {{ 'roboto-light-pro.ttf' | asset_url;}})format("truetype");
font-weight:300;
font-style:normal;
}
Step 4: Update code to match your new font
Make sure that you replace “FONT” within the code you copied with the name of your font, and include any hyphens or underscores in the name so that it’s an exact match.
Below that code, add the following code to change the types of text.
Please replace “FONT” with your font name as follows:

h1,h2,h3,h4,h5,h6,.headline,.subtitle {font-family: ‘Roboto’!important;}

Step 5: Save your Changes and check your new font
Be sure to save your changes after you have finished all the steps.

Shopify Speed Optimization Service Packages

To improve the speed of your Shopify site with our speed optimization packages Contact Us. We can assist you in choosing the services that will help you.

divide
Choose your Shopify Optimization Plan Basic Platinum Advanced
Prices (in USD) $99 $339 $399
Pass the Google Core Web Vitals (Product Page) ***    
6 Months Support    
Will Upgrade Your Theme    
Google PSI Homepage Score * (For Desktop) 60-70 Above 85  
Google PSI Product Page Score ** (For Desktop) 60-70 Above 85 Pass Web Vitals***
Google PSI Homepage Score * (For Mobile) 40-50 Above 65  
Google PSI Product Page Score ** (For Mobile) 40-50 Above 65 Pass Web Vitals***
Page Load Time (Pingdom) * < 3 sec < 3 sec < 2 sec
Reports
Free SEO Audit  
  Optimize My Site Optimize My Site Optimize My Site
*Few Shopify Apps are known to reduce score and increase load time due to higher JS payload. In case during our Optimization we find such Apps we will inform about the App and communicate with App providers and get it resolved or recommend an alternative App as a solution.
**Higher JS payload due to Apps result in lower Google Page Speed Insights( PSI ) score specially for mobile. Hence while we guarantee score improvement we can guarantee achievable score by alternate App usage or some custom shopify coding.
***May require design and functionality change.
get in touch

One Comment

  1. Dianna W. Perry July 12, 2022 at 6:25 am - Reply

    This content is very informative and well define with example. Thank you for sharing with us.

Leave A Comment