Coding a heading font into the Theme 'Taste'

[jh08099]

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?

[PageFly-Amelia]

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