How to add custom fonts in Shopify

Adding fonts to a Shopify theme is easy, but knowledge of CSS and HTML can be helpful. However, if you follow these steps carefully, your new font should upload within a few minutes

Adding custom fonts to your Shopify theme can be a great way to create a unique look for your website. In this tutorial, we’ll walk through the steps of adding Shopify fonts to your theme and adding them to Shogun for use on your Shogun pages.

Fonts are important in any ecommerce business because getting people to read your content is no easy task. On average, users only read about 30% of the words on the page. So every word counts, and user engagement is paramount.

Using attractive fonts can keep users on the page longer, lead them to your content, and hopefully guide them through the buying process. Properly used fonts guide the eye from one place to another in the order you want. Additionally, headlines and ad banners that use bold fonts can draw attention to what you’re promoting.

Why Add Custom Shopify Font to Your Store?

One way to stand out from other stores is to add custom Shopify fonts. This is a great strategy for building your brand and enhancing the aesthetics of your storefront. Differentiate your store with custom fonts.

Choosing the Right Font(s) for Your Store

You should make sure that the font you choose reflects your identity and business. Don’t use a font that’s beautiful but hard to read, as it undercuts the overall value of the content. Avoid using more than three or four different fonts in your store. Too many fonts can give your store a cluttered feel. Also, you want the fonts you choose to work well with each other even on different pages, so don’t choose fonts that are completely different from each other. Instead, choose fonts that complement each other.

Here is the step by steb guide:

1. Go to your admin dashboard and click on settings in the bottom left corner

2. In the left side menu click the "Files"

3. Click the green button at the top right corner of the popup window to upload the font files

4. Upload you files(woff,woff2) to the files section. If you have TTF or EOT or any other font file extension please follow the following step:

i- Go to:
ii- Upload you TTF files and click convert
iii- Downlaod the converted files
iv- Upload these Woff or Woff2 files

5. Click on the link icon to cope the link of the font file. (Save that link we will use it later)

6. Again go to your admin dashboard and click on "Online store" then Click on "Themes"

7. Click on the Action button and from the dropdown panel select edit code

8. In the code editor expand the layout folder and click on "theme.liquid" file. It will open in the editor on right-hand side.

9. Find the {% style %} text and paste the following code after it.

Note: if your font file is "woff2" change that too in the round braces after format .

@font-face {
font-family: 'name your font';
src: local('name your font'), url('Link that you cope earlier') format('woff');

Dont forgot to click on save on top right corner after any change

10. Now on the left side expand the "Assets" folder and find the main CSS file of your theme.

Note: In your theme the CSS file may have different name such as ("global.css","base.css","theme-section.css","theme.scss.liquid")

11. Now in your CSS file press ( CTRL + F ) and in the search box enter the text "font-family"

12. After you found any line that contains font family after the colon enters the name of the font that you have chosen earlier. in step no. 5

In my case i choose "mylove" as my font name.

13. Click on the save button.

14. Here is the look of my demo store before applying the font

15. Dammn, Here is the new look of my store with the new font.

Bouns: If you are still not able to do that please contact me on my email,

[email protected]

I will help you in setting up the font for your store. You can contact me for any design change for you theme. And its absolutely free.

Hey! Want this to be done by me? or any other Shopify problem or even you want to create a custom section same like your compitator.

Here is the video Guide

Play Video