Most Shopify themes come preloaded with a selection of Google Fonts that you can easily access and customize through the theme's Customize page. This allows you to experiment with various font styles and combinations effortlessly.
But what if you want to use your own custom fonts? Imagine you've downloaded a new font and have files like .ttf, .woff, or .woff2. How do you add these fonts to your Shopify theme and set them as the default, replacing the existing fonts?
In this tutorial, I'll guide you through the process step by step. The good news is, you don't need any prior coding experience! However, if you'd like to apply more detailed customizations—such as styling specific HTML elements with your chosen font—you may need some basic knowledge of HTML and CSS.
Making a backup copy of your current theme
Before starting the tutorial, make sure to download a backup of your theme. This way, you can easily restore it if anything goes wrong.
Step 1: Download & Add the font files to your store
The first step is to upload the fonts to your Shopify store. Once uploaded, we can reference them in the code and incorporate them into the theme.
1. From your Shopify admin, navigate to Content > Files > Upload Files
2. Click Upload Files in the top-right corner and upload all your font files. Web font files typically have extensions such as .ttf, .woff, .woff2, .eot, .svg, or .otf.
Ensure you upload all the font files included in the .zip, or at least the ones you plan to use.
For example, in my case, I only have a single font file in the .otf format, so I’ll be uploading just that one.
After uploading all your font files, the next step is to add some code to make them usable.
Keep this tab open, as we’ll be coming back to it shortly.
Step 2: Adding the code to read the font
1. In your Shopify admin, navigate to Online Store > Themes > Actions > Edit Code.
2. Under sections, click on “Add a new section” and create a section named:
jahin-custom-fonts
3. Copy Paste Code Below From Doc File & Save
https://docs.google.com/document/d/1LovDzvoYs_CnsXx45a8YyVbKj7cTBWSwaQjaMUawZfc/edit?usp=sharing
4. Now, open the file named
theme.liquid
Search for:
Paste the following code
right below the line you found:
Step 3: Using the custom font on your website
1. On the top left, click on the 3 dots and “customize theme”.
2. On the sidebar located on the left side, you will find a new section called “Jahin Custom Font”.
Click on the arrow on the left to expand it, and then click on “Add font”.
3. Under “Custom font name”, make sure you add a descriptive name. It can be anything you wish.
My font's name is “Noxima-Bold”, so I'll be adding that.
Now, under “Custom font URL”, add the URL for the file that was added back in step 2. Simply click on the chain icon to get the font's URL.
In the screenshot above, you can see the custom font is instantly loaded on the Customize page.
You can choose which HTML elements will use your custom font and even add multiple fonts if needed.
Keep in mind that the first font in the list takes priority over the others. For example, if you assign the "H1" element to five different fonts, it will only use the first font listed.
Extra: Applying the custom font to specific elements
If you want your custom font to apply only to specific elements, you can use the "CSS Selectors" field to add the appropriate selector. Keep reading below to learn how to identify the CSS selectors for your website.
Conclusion
Custom fonts are great, but use them wisely: too many fonts will end up overloading your website and taking a toll on its performance.
Remember that you can also fully disable the Jahin custom font at any time you wish by simply clicking on “Jahin Custom Font” > uncheck “Enable”.
