Jump to content

Changing custom font in product title

Recommended Posts

Hi, 

I'm having real trouble changing font relating to products. 

It would seem they don't adhere to my previous coding ( a custom font change for h1, h2,h3 and P)

I have searched this forum and did try solutions already posted to no luck.

Anyone know what could be wrong?

tweak-product-item-details-show-title .ProductItem-details h1.ProductItem-details-title {
  font-family: 'TYPEWRITER';
}

Also tired this one: 

.producttitle {

font-family: 'TYPEWRITER';

}

Sorry, very new to CSS but what seems to work for some people just isn't for me. 

My site isn't online yet so I have attached a screenshot and circled the text I would like changing to the typewriter font seen also in the image. Thanks so much!image.thumb.png.7ec7d5b57fcf7d9b2fdf500bdec3bf8d.png

Link to comment
8 hours ago, El1z4b3th said:

Hi thanks so much for your response - this is the link to my product page: 

https://aqua-cricket-9zk5.squarespace.com/oils

Let me know if you need anything else!

 

 

Your site product title has different class name. Use this

.collection-type-products .grid-title {
    font-family: 'TYPEWRITER';
}

 

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 6 months later...
  • 2 weeks later...
On 11/24/2020 at 12:57 AM, sabrinaramgal said:

Hi!! I'm having the same problem

I want to change the title of my products to my custom font I used in H2.

Here's the link to the website:

www.elojoquevelaluz.com

Product name uses this CSS

h1.ProductItem-details-title {
    font-family: 'ojo regular' !important;
}

 

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 3 weeks later...
On 12/21/2020 at 1:41 PM, Sherman said:

Hi i used this code, changed it up to my custom font family and it worked for the desktop site and not the mobile site. Is there a reason why?

https://dog-apricots-dryc.squarespace.com/

Here's the site. 
Password: Besttaste123

I don't see product title on mobile? https://dog-apricots-dryc.squarespace.com/shop/p/506sojhh547wtp3lk484l9akpds95c

Also, on mobile, footer menu right align, social is left align. Do you want all right or left align?

On this page https://dog-apricots-dryc.squarespace.com/contract-manufacturing

You haven't changed SEO Title, so browser tab name still shows "Gallery 2"

Similar on this page https://dog-apricots-dryc.squarespace.com/customised-packaging

 

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 2 months later...
On 2/23/2021 at 2:47 AM, TwoRabbits said:

Hi T! That code worked for my site's shop page - thank you! How do I change the font for the individual item page?

Can you share link to an individual item page? We can check easier.

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 2 months later...
On 5/20/2021 at 3:57 PM, Chlohat said:

Hi, i am having the same Problem. 

I want to use a font i added to the website called "ALTE-Regular2"

 

but i can't seem to make it work. 

https://groundhog-lion-mba7.squarespace.com/reservation-en-ligne

Password: Chloelaplusbelle

Add to Design > Custom CSS

/* Product title font */
h1.ProductList-title {
    font-family: 'ALTE-Regular2' !important;
}

 

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 2 weeks later...
On 5/21/2021 at 4:22 PM, tuanphan said:

Add to Design > Custom CSS


/* Product title font */
h1.ProductList-title {
    font-family: 'ALTE-Regular2' !important;
}

 

Hi thank you for that, is there also a way to make the product title on the product page be in my custom font. Thank you for your help. 

 

Link to comment
23 hours ago, Chlohat said:

Hi thank you for that, is there also a way to make the product title on the product page be in my custom font. Thank you for your help. 

 

Use this

/* Product title font */
h1.ProductList-title, h1.ProductItem-details-title {
    font-family: 'ALTE-Regular2' !important;
}

 

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 8 months later...
On 3/1/2022 at 5:50 AM, CreativeGirlHub said:

Hi I was having the same problem with the Product Title and this code worked 

/* Product title font */
h1.ProductList-title,
h1.ProductItem-details-title {
    font-family: 'alta-regular' !important; }

 

However now how do I add that font to the product price?

Screen Shot 2022-02-28 at 3.49.53 PM.png

Use this

h1.ProductList-title, h1.ProductItem-details-title, .product-price, .product-price * {
    font-family: 'alta-regular' !important; 
}

 

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
Just now, isobeleastwood said:

hey,

i am having a similar issue! 

how do i change the font to my 'mainfont' on the product list page (not the individual products page)? 

i have successfully applied it to the price and main heading (on the individual page only - not the product list gallery page).

thanks!!!

issy

 

Screen Shot 2022-03-05 at 4.32.43 pm.png

 

Screen Shot 2022-03-05 at 4.32.52 pm.png

Link to comment
  • 6 months later...

 

On 3/3/2022 at 4:44 AM, tuanphan said:

Use this

h1.ProductList-title, h1.ProductItem-details-title, .product-price, .product-price * {
    font-family: 'alta-regular' !important; 
}

 

 

I am trying to plug this code into my website but it isn't changing the product title, only the price. I am trying to change the product title to Open Sans bold.

@tuanphan Are you able to help? 

Screen Shot 2022-09-23 at 11.48.32 AM.png

Link to comment
13 hours ago, taylaavee said:

 

 

I am trying to plug this code into my website but it isn't changing the product title, only the price. I am trying to change the product title to Open Sans bold.

@tuanphan Are you able to help? 

Screen Shot 2022-09-23 at 11.48.32 AM.png

I just tested on my demo site. The code should work. Can you share link to a product on your site?

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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.