Horizon theme product page title font

Store Design
,
1

Hey guys,

I’m moving from Dawn to Horizon theme. So far I am loving the increased flexibility in design for the theme.

However - with my basic coding knowledge I’m struggling to change the font to a custom font for the title of the horizon product page.

.title {
  font-family: "RoseAvenue";
}

is not working.

I have done the font-face correctly and have updated the font throughout the rest of the website but the title of the product page seems to be a link???

Any help would be much appreciated.

Cheers

2

Hi @WillyMason

Can you try this code and see how it works for you:

/* Change product title font */
.product__title h1 {
  font-family: "Your Font Name", sans-serif;
}

Let me know how it goes

3

You can follow this article to add custom font to your store

Then use this code to change font of your product title

.product-details h1,
product-card a[ref="productTitleLink"] { font-family: 'your font name' !important; }

Best regards,
Dan from Ryviu: Product Reviews App

4

Hello @WillyMason

On the Horizon theme, product titles are links, so you need to target the right selector.

  • Go to Online Store → Themes → Edit Code
  • Open your main stylesheet (base.css, theme.css, or styles.css under **Assets`)
/* Product page title */
.product__title,
.product__title a {
  font-family: "RoseAvenue", sans-serif !important;
}
5

This needs to be checked by seeing your website page backend code details, so that can give you the best answer. Would you mind sharing store URL to let me help find out the correct class name? Thank you!