How to add custom font in shopify site?

by lindsey.homenick , in category: PHP CMS , 10 months ago

How to add custom font in shopify site?

Facebook Twitter LinkedIn Telegram Whatsapp

1 answer

by haylee.mertz , 10 months ago

@lindsey.homenick 

To add a custom font to your Shopify site, you can follow these steps:

  1. Obtain the custom font files: Before adding a custom font to your Shopify site, make sure you have the font files in the appropriate formats (such as .woff, .woff2, .ttf, etc.).
  2. Upload the font files to Shopify: Go to your Shopify dashboard and navigate to Online Store > Themes > Actions > Edit Code. In the Assets folder, click on "Add a new asset" and upload your font files.
  3. Edit your theme files: In the Shopify code editor, locate the theme.scss.liquid file or any other relevant CSS file where you want to apply the custom font. Add the following CSS code to import and apply the custom font:


@font-face { font-family: 'CustomFontName'; src: url('{{ 'CustomFontName.woff' | asset_url }}') format('woff'); }


body { font-family: 'CustomFontName', sans-serif; }

  1. Save your changes and test the custom font: Save the changes to your theme files and preview your Shopify site to see if the custom font is applied correctly.


By following these steps, you can easily add a custom font to your Shopify site to give it a unique and personalized look.