Re: changing font of product titles and announcement bar only

charlieharrier · ‎12-14-2022

Hi, I'd like to change the font on only the product titles and announcement bar, while keeping the font I use for titles and headings across the rest of the website. I have tried some solutions in changing the code but everything I have tried, upon saving nothing changes on my website. If anyone would be able to offer some advice or a solution I would be most grateful. I am using the template dawn and possibly the font I would like to change it to would be Raleway, however this is a tangible option but I take it swapping out the font styles would be the easy part (I hope). Many thanks.

GemPages · ‎12-15-2022

@charlieharrier

Please update the code below:

<link href="https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
<style>
  #shopify-section-announcement-bar .announcement-bar__message{
    font-family: 'Raleway' !important;
  }
  .product__info-wrapper .product__title,
  .product__info-wrapper .product__title h1,
  ul.product-grid  .card__heading a,
  ul.product-grid .card__heading{
     font-family: 'Raleway' !important;
  }
</style>

Hope my solution can work and support you!

Kind & Best regards!

GemPages Support Team.

GemPages - Build any high-converting store pages for any business

- If you find my reply helpful, please hit Like and Mark as Solution
- Get connected: App Store | Blog | Community | Help Center

View solution in original post

GemPages · ‎12-14-2022

Hello @charlieharrier

It's GemPages support team and glad to support you today.

To provide you with the most precise solution in this case, could you please share the home page link?

GemPages - Build any high-converting store pages for any business

- If you find my reply helpful, please hit Like and Mark as Solution
- Get connected: App Store | Blog | Community | Help Center

charlieharrier · ‎12-14-2022

Hi there, the homepage link is www.jewelry-bargain.com . The current font for headings is 'Smooch' and I would like to keep that across the site, but instead changing the announcement bar font and product titles to 'Raleway'. Many thanks.

GemPages · ‎12-14-2022

@charlieharrier

It's the GemPages support team and glad to support you today.

I would like to give you a solution to support you:

1. Go to Online Store -> Theme -> Edit code:

2. Open your theme.liquid theme file

3. Paste the below code before </body>:

<link href="https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
<style>
  #shopify-section-announcement-bar .announcement-bar__message{
    font-family: 'Raleway' !important;
  }
  ul.product-grid .product__title,
  .product__info-wrapper .card__heading{
     font-family: 'Raleway' !important;
  }
</style>

Hope my solution can work and support you!

Kind & Best regards!

GemPages Support Team.

GemPages - Build any high-converting store pages for any business

- If you find my reply helpful, please hit Like and Mark as Solution
- Get connected: App Store | Blog | Community | Help Center

charlieharrier · ‎12-14-2022

@GemPages

Hi there, thank you very much for the reply. I have copied the code and pasted it in the <body> section and it has changed the announcement bar but it has not changed the product titles. Just to clarify I have put it in the theme.liquid file. Any idea why it has changed the announcement bar but not the products title? Thanks again.

GemPages · ‎12-15-2022

@charlieharrier

Please update the code below:

<link href="https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
<style>
  #shopify-section-announcement-bar .announcement-bar__message{
    font-family: 'Raleway' !important;
  }
  .product__info-wrapper .product__title,
  .product__info-wrapper .product__title h1,
  ul.product-grid  .card__heading a,
  ul.product-grid .card__heading{
     font-family: 'Raleway' !important;
  }
</style>

Hope my solution can work and support you!

Kind & Best regards!

GemPages Support Team.

GemPages - Build any high-converting store pages for any business

- If you find my reply helpful, please hit Like and Mark as Solution
- Get connected: App Store | Blog | Community | Help Center

charlieharrier · ‎12-15-2022

Thank you this has worked for me 🙂

Re: changing font of product titles and announcement bar only

changing font of product titles and announcement bar only

GemPages - Build any high-converting store pages for any business

GemPages - Build any high-converting store pages for any business

GemPages - Build any high-converting store pages for any business

GemPages - Build any high-converting store pages for any business

Community Blog Articles