Coding a heading font into the Theme 'Taste'

Store Design
, , ,
1

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?

2

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