How to change fonts on your Shopify store

change fonts in shopify

Here’s how you can change fonts on your Shopify store

  • Login to the Shopify dashboard and go to the Themes tab
  • Click on Customize theme.
  • Find the Themes option on the left-hand side of the tab that opens.
  • Go to the Typology tab - you will get plenty of options to edit your Shopify font, like Base font, Page Heading font, Links color, Product name, Product description styles and Product price color.
  • To change font size, you can simply enter the pixel requirement.
  • To change the color, click on the color area and pick the color from the color picker or enter the hex code
  • To change the font type, select Custom, and then enter your own link and the google font family.
  • If you want to replace the customized font with the regular one, select Regular and you can pick the font you want from the list of available fonts.
  • Once you have made the changes required, click Publish changes to apply the changes made to your live store or select Save setting as Preset.

How to add your own (custom) font style?

  • Open Google web font page and pick the font you want using the filter in the menu on the left.
  • Select the font you want from the list and click on Quick use button.
  • Select the appropriate font style.

Note: The more styles you select, the slower the page will upload.

  • Move down to the Add this code to your website section, and copy the code mentioned in the section
  • Login to your Shopify dashboard, go to the Themes section and select Customize theme
  • Edit the HTML/CSS, go to Layout and click theme.liquid file.
  • Paste the code that you copied above </head> tag, and then click on Save.
  • Then move down to the Integrate the fonts into your CSS section on the Google
    Webfonts page and copy the CSS code provided by Google.
  • Open the CSS file that you wish to make changes to, and edit the HTML/CSS > Assets, in most cases it is named as style.css.liquid

P.S. You can find it using Ctrl +F and replace the font family code with the code copied from Google.

  • Click Save when you’re done
//