Change store name font to custom font on debut theme

Store Design
1

hello,

I’ve tried to change my store name font to a custom font on my live theme (debut theme). I download the font I want to use from dafont.com and converted the files to woff and woff2. I followed the steps from this link that was recommended from the Shopify community https://www.weareunderground.com/blogs/theme-support/how-do-i-add-my-own-fonts-to-a-theme but it did not work. Can someone help me please.

my store link is https://www.fromthewest.co

2

@FromtheWest

Please try this tutorial. Let me know if need further assistance.

Kind regards,
Diego

1 Like
3

Hello @FromtheWest

Kindly follow the instructions mentioned in https://ecomexperts.io/blogs/liquid-tutorial-shopify/shopify-font

1 Like
4

Hello @FromtheWest ,

Follow these below steps to Customize your store name font.

To add/change font using Google Fonts Library.

  • Go to Theme Code Editor
  • Open the edit code from the theme edit option
  • Go to the layout folder
  • On the head section, open the theme.liquid file
  • Select the link of the font you want to use from Google Fonts - https://fonts.google.com/
  • Insert the link of the font you want to use

For Example:

  • Refer to the below image.

Cedcommerce_0-1656070825215.png
Cedcommerce_0-1656070825215.png1343×586 84 KB

  • After adding the link open the asset folder in the theme editor
  • Look for the theme.css file and open it.
  • Add this below-provided code at the bottom and save the file.

.site-header__logo{

font-family: ‘Smooch’;

}

(Note: This code is for the debut theme. However, if you are using any other theme, change the class name and add the font family of the google font that you are using.)

To Change Font using ttf File

  • Upload the ttf file to the Assets folder.
  • On the theme just click on add asset and upload the file.
  • Refer to the below image.

Cedcommerce_1-1656070825048.png
Cedcommerce_1-1656070825048.png1360×599 100 KB

  • After adding the ttf file, go to the theme.css file at the bottom.
  • Add the below-provided CSS code.

@font-face {

font-family: “custom-font”; //here you can add any name

src: url(“Fascinate-Regular.ttf”) format(“woff2”);

}

.site-header__logo{

font-family: “custom-font”;

}

  • Put the exact src file name of the ttf file you have uploaded in the asset folder.

(Note: Above CSS is for the debut theme, for any other theme, change the class name of the logo text.)

Hope it helps, if you need more information please connect with us.

All the best,

CedCommerce

1 Like