Solved

How to Add Custom Fonts to Shopify Store?

topnewyork
Navigator
257 26 36

Hi there,

I'm looking to add a custom font to my Shopify store, but I'm unsure how to do it. Could someone please provide a simple step-by-step guide on how to add custom fonts to my Shopify theme? Your assistance would be greatly appreciated! Thank you.

Need a Shopify developer?
Hire us at topnewyorkwebdesign.com
For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
Subscribe to our youtube channel
Accepted Solution (1)

websensepro
Shopify Partner
1014 139 147

This is an accepted solution.

Hi @topnewyork,

Check out this easy-to-follow video tutorial! It will guide you through the process of adding custom fonts to your Shopify store, making it effortless to integrate your preferred fonts into your theme. By following along with this tutorial, you'll easily clear up any confusion and enhance your store's appearance with personalized typography. Enjoy customizing your fonts for your Shopify store, just like I did with the assistance of this video! You can see below an image of how my fonts changed before and after following the tutorial.

 



websensepro_0-1709811955938.png

 

 

websensepro_1-1709812068242.png

 

Thank you

Need a Shopify developer?
Hire us at WebSensePro
For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
Subscribe to our youtube channel or buy us a Cofee here

View solution in original post

Replies 3 (3)

saim007
Shopify Partner
462 60 79

@topnewyork If you have custom fonts in your system than just upload all font files on the Online Store > Edit Code > Asset tab > and upload all the custom fonts that you want to include than write the below code in style.css to include font in your website styling.

@font-face {
  font-family: 'Custom font name';
  src: url(fonts/roboto-mono-v12-latin-regular.woff2) format('woff2'),
       url(fonts/roboto-mono-v12-latin-regular.woff) format('woff'),
       url(fonts/roboto-mono-v12-latin-regular.ttf) format('truetype');
}

Just enter the font family name and src url path, that's it!

If you have google font CDN link than you can directly add in the theme.liquid file.

Saim | Shopify Partner Expert

Was I helpful?

Buy me a Coffee

🙂
Hire me   to unlock the full potential of your e-commerce store 🙂

websensepro
Shopify Partner
1014 139 147

This is an accepted solution.

Hi @topnewyork,

Check out this easy-to-follow video tutorial! It will guide you through the process of adding custom fonts to your Shopify store, making it effortless to integrate your preferred fonts into your theme. By following along with this tutorial, you'll easily clear up any confusion and enhance your store's appearance with personalized typography. Enjoy customizing your fonts for your Shopify store, just like I did with the assistance of this video! You can see below an image of how my fonts changed before and after following the tutorial.

 



websensepro_0-1709811955938.png

 

 

websensepro_1-1709812068242.png

 

Thank you

Need a Shopify developer?
Hire us at WebSensePro
For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
Subscribe to our youtube channel or buy us a Cofee here
topnewyork
Navigator
257 26 36

Fantastic! That really worked. Thank you very much! @websensepro 

Need a Shopify developer?
Hire us at topnewyorkwebdesign.com
For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
Subscribe to our youtube channel