Jump to content

I'd like to change the font of my product title and price on my product page

Go to solution Solved by paul2009,

Recommended Posts

  • Solution
9 minutes ago, ivnisigoth316 said:

I'd like to change the font of my product title and price on my product page on every product page please

I see you've added some Custom CSS for the Product List Page (PLP) but I don't see any for the Product Detail Page (PDP). You'll need to use something like this:

.collection-type-products .ProductItem-details h1.ProductItem-details-title, .ProductItem .ProductItem-details .product-price {
  font-family: "Neue-Haas-Unica-Medium";
}

 

Did this help? Please give feedback by clicking an icon below  ⬇️

Me: I'm Paul, a SQSP user for >18 yrs & Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL. We provide high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is completely free. You can thank me by selecting a feedback emoji. Buying a coffee is generous but optional.

Link to comment
10 hours ago, ivnisigoth316 said:

Is it possible to do this same with the breadcrumbs please?

Thanks

For the breadcrumbs, add this code to custom css:

.ProductItem-nav {
  font-family: "Neue-Haas-Unica-Medium";
}

 

Please give this a 👍 if it helps. Make sure to quote me or tag me in your reply, otherwise I won't be notified.

Link to comment
  • 2 years later...
On 5/28/2024 at 8:45 PM, hayleykimstudios said:

Thanks for providing this code - I've just used it.

Can you provide code to change the font for 'variant' (in this case colour) and and quantity please??

image.thumb.png.402ab09fc1d86d1cccba69e3e7263689.png

Use this code. If it doesn't work, please share link to product in screenshot, we can check easier.

div.product-quantity-input *, [class*="variant"] * {
    font-family: "Neue-Haas-Unica-Medium";
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 4 weeks later...
On 6/24/2024 at 6:27 PM, hayleykimstudios said:

@tuanphan this works but also changes all of my H1,H2 and H3 fonts across the whole site 😞 

Remove the code & use this new code

div.product-quantity-input *, .ProductItem-details .ProductItem-details-checkout [class*="variant"] * {
    font-family: "Neue-Haas-Unica-Medium";
}

If it still doesn't work, please share link to a product on your site, I can check code easier

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.