Coding a heading font into the Theme 'Taste'

Coding a heading font into the Theme 'Taste'

jh08099
Shopify Partner
3 0 0

I have a client who needs their custom font to be coded to be all of the headings in the theme 'Taste'. Could someone please assist me?

Reply 1 (1)

PageFly-Amelia
Shopify Partner
603 165 236

This is Amelia from PageFly - a Landing Page Builder App


You’ll need to modify the theme’s CSS. Here’s a step-by-step guide:

  1. Upload the Custom Font:

    • First, ensure your custom font files (e.g., .woff, .woff2, .ttf) are uploaded to your Shopify store.
    • Go to Online Store > Themes > Actions > Edit code.
    • In the Assets folder, click Add a new asset and upload your font files.
  2. Add Font to CSS:

    • Open the theme.css or styles.css file in the Assets folder.

    • At the top of the file, add the following code to define your custom font:

      @font-face {
        font-family: 'CustomFont';
        src: url('{{ 'your-font-file.woff2' | asset_url }}') format('woff2'),
             url('{{ 'your-font-file.woff' | asset_url }}') format('woff'),
             url('{{ 'your-font-file.ttf' | asset_url }}') format('truetype');
        font-weight: normal;
        font-style: normal;
      }
  3. Apply Font to Headings:

    • In the same CSS file, add the following code to apply the custom font to all headings:

      h1, h2, h3, h4, h5, h6 {
        font-family: 'CustomFont', sans-serif;
      }
  4. Save and Preview:

    • Save the changes.
    • Preview your store to ensure the custom font is applied to all headings.

I hope that my solution works for you.

Best regards,

Amelia | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!


➜ Optimize your Shopify store with PageFly Page Builder (Free plan available) 
➜ Weekly updated Shopify tutorials on YouTube 


All features are available from Free plan. Live Chat Support is available 24/7.