how to change font shopify

how to change font shopify


How to Change Font in Shopify?

Are you looking to stand out from the crowd with a visually stunning website design? Shopify offers an easy way to customize the fonts on your store. Here’s a quick guide to show you how to change font in Shopify and make your store look absolutely amazing.

Where to Download Custom Fonts?

Before you can start customizing your Shopify store, you will need to download custom fonts from a trusted source. We recommend checking out the following websites:

  • Font Squirrel: A great source for free fonts.
  • Typekit: Many popular designers rely on this resource.
  • Fonts.com: For a fee, they offer comprehensive, top-quality fonts.

How to Upload a Custom Font?

Once you have downloaded the perfect font for your store, the next steps are easy to follow:

  1. Within the Shopify control panel, navigate to Online Store > Themes.
  2. In the navigation bar on the left, select Actions > Edit Code.
  3. Click on Assets in the sidebar.
  4. Then click the Upload asset button and select the font file.
  5. To apply your font, navigate to theme.scss.liquid. This file controls the settings in your theme. Scroll down to the bottom of this file and add the following code:

@font-face {
font-family: FONT_NAME;
src: url('{{ "FONT_FILE_NAME.EXT" | asset_url }}');
}

How to Apply the New Font?

Now that you have uploaded your font and associated it with a font family, the next step is to apply it to your shop. To do this, you will need to add the following line of code to the relevant areas of the theme.scss.liquid file:


{ font-family: FONT_NAME, sans-serif; }

Simply replace FONT_NAME with the name of the font that you uploaded and you will be good to go!

Conclusion

Shopify makes it very simple to customize the fonts on your store. To change font in Shopify, you need to download a font from a trusted website, upload it to your Shopify shop, and then associate it to a font family. Next, add the font family to the relevant parts of your theme.scss.liquid file and you’re done! With the help of Shopify, your store has the potential to be a work of art.

Related Fonts