custom css font for product title

How to do make my product title font be the same font as H1, and price font be the same as H2?

As a community, we love to help fellow Squarespace users improve their websites but to help, we need to see your site first hand, which means we need you to provide a working link to your website. If the site isn't live, please set a password in the visibility settings and tell us what it is.

 

Hi there. Same problem over here. Tried using .product-title but did not work.

h1, 2, 3, and p are working fine with custom fonts. Any ideas?

here's a link to the product page. 

@paul2009 indeed. thanks!

@paul2009 thanks for this tweak. I used it on my product detail page, but am looking to customize this page as well so each soda brand is also the  Carrosserie typeface: https://www.yachtclubsoda.com/beverages/sodas

hello, 

THanks @paul2009 for the tweak. Just like @kristinapetrilli I've managed to change font for product title in product detail page but would really like to change it across all product titles in the main shop space. 

thanks

1 hour ago, inks said:

hello, 

THanks @paul2009 for the tweak. Just like @kristinapetrilli I've managed to change font for product title in product detail page but would really like to change it across all product titles in the main shop space. 

thanks

Can you share link to shop page?

On 4/24/2020 at 1:23 PM, tuanphan said:

Can you share link to shop page?

It's still work in progress but here's the link: https://www.therumkitchen.com/shop

If you look up product detail pages the titles there are changed thanks to Paul's tweak but I'd like it to show on the main page too. 

Also, now I realised that I can't choose custom font for description either (on product detail page) so help with that would also be much much appreciated. 

Thank you in advance

18 hours ago, inks said:

It's still work in progress but here's the link: https://www.therumkitchen.com/shop

If you look up product detail pages the titles there are changed thanks to Paul's tweak but I'd like it to show on the main page too. 

Also, now I realised that I can't choose custom font for description either (on product detail page) so help with that would also be much much appreciated. 

 

Thank you in advance

Add to Home > Design > Custom CSS

.product-block .productDetails .product-title {
    font-family: tuanphan;
}

Hi everyone! I have been trying to use both css codes but it still does not work on the products title, it work on the price only. Can anyone help me? Thanks! https://maria-villarreal-s2wp.squarespace.com/config/settings/site-visibility 

9 hours ago, MariaCP said:

Hi everyone! I have been trying to use both css codes but it still does not work on the products title, it work on the price only. Can anyone help me? Thanks! https://maria-villarreal-s2wp.squarespace.com/config/settings/site-visibility 

What is access password?

I am currently trying to change my product title and product pricing to the same font as any header and the product description. Unfortunately I have not been able to do so what is the code for product title and pricing. IE I am using my home page as an index page and adding products straight to there

13 hours ago, ErickNicholas said:

I am currently trying to change my product title and product pricing to the same font as any header and the product description. Unfortunately I have not been able to do so what is the code for product title and pricing. IE I am using my home page as an index page and adding products straight to there

Can you share link to your site? We can check easier.

Hi! 

I am trying to use both codes, but they don't work, can anyone help me? 🙂

https://www.elojoquevelaluz.com/productos/p/parche

On 11/24/2020 at 1:05 AM, sabrinaramgal said:

Hi! 

I am trying to use both codes, but they don't work, can anyone help me? 🙂

 

https://www.elojoquevelaluz.com/productos/p/parche

The link doesn't exist. You can check again.

On 4/24/2020 at 8:23 AM, tuanphan said:

Can you share link to shop page?

is there a code for custom font for the title text on the shop listings page and for the price?

On 7/26/2022 at 3:59 AM, nahlah said:

is there a code for custom font for the title text on the shop listings page and for the price?

Can you share link to listing page? We can help easier

Dear all, I've been reading a lot of posts and adding few codes but still I can't solve my problem.
I would like to customize the font of the texts and prices highlighted in red in the attached image.

The font family/name is Red Hat Display Light and it's a custom CSS font (already uploaded on CSS)

Can someone please help?

Link: https://minnow-decagon-amff.squarespace.com/

PSW: Squarespace2022

On 10/11/2022 at 11:43 PM, Michele_Erba said:

Dear all, I've been reading a lot of posts and adding few codes but still I can't solve my problem.
I would like to customize the font of the texts and prices highlighted in red in the attached image.

The font family/name is Red Hat Display Light and it's a custom CSS font (already uploaded on CSS)

Can someone please help?

Link: https://minnow-decagon-amff.squarespace.com/

PSW: Squarespace2022

 

 

 

Add this to Design > Custom CSS

.products.collection-content-wrapper .grid-main-meta .grid-title, .product-price {
    font-family: 'Red Hat Display Light' !important;
}

Still the same problem 😞

Here's the full CSS I have.
Any chance of code conflicts?

Many thanks!

 

@font-face {
font-family: 'Digger';
src: url('https://static1.squarespace.com/static/633c78bee905530d06317820/t/6342adcd118f226aed440460/1665314253228/Digger.otf'); }

h1 {font-family: 'Red Hat Display Light';}

@font-face {
font-family: 'Red Hat Display Light';
src: url('https://static1.squarespace.com/static/633c78bee905530d06317820/t/6342b95dbd53a31424a70c99/1665317213853/RedHatDisplay-Light.ttf'); }

h2 {font-family: 'Red Hat Display Light';}
h3 {font-family: 'Red Hat Display Light';}
h4 {font-family: 'Red Hat Display Light';}
p {font-family: 'Red Hat Display Light';}
m {font-family: 'Digger';}

/* monospace */
pre code {
    font-family: Red Hat Display Light !important;
}

.header-nav-item a {
  font-family: 'Red Hat Display Light' !important;
}

nav.header-menu-nav-list a {
    font-family: 'Red Hat Display Light' !important;
}

.collection-type-products .ProductItem-details .product-price,
.ProductItem-nav-breadcrumb,
body:not( .button-style-default ) .sqs-add-to-cart-button,
.nested-category-children

  {
  
    font-family : Red Hat Display Light;
    
    }

#cart ._3qWE9VU-U span:first-child {

  font-family : Red Hat Display Light;
  
  }

/* Promotional popup custom font */
.sqs-popup-overlay-content * {
    font-family: 'Red Hat Display Light' !important;
}

.nested-category-breadcrumb {
  font-family:'Red Hat Display Light';
}
.nested-category-title {
  font-family:'Red Hat Display Light';
}

.tweak-product-item-details-show-title .ProductItem-details h1.ProductItem-details-title {
  font-family: 'Red Hat Display Light';
}

.product-block .productDetails .product-title {
    font-family: Red Hat Display Light;
}

.products.collection-content-wrapper .grid-main-meta .grid-title, .product-price {
    font-family: 'Red Hat Display Light' !important;
}
 

On 10/15/2022 at 9:47 PM, Michele_Erba said:

Still the same problem 😞

Here's the full CSS I have.
Any chance of code conflicts?

Many thanks!

 

@font-face {
font-family: 'Digger';
src: url('https://static1.squarespace.com/static/633c78bee905530d06317820/t/6342adcd118f226aed440460/1665314253228/Digger.otf'); }

h1 {font-family: 'Red Hat Display Light';}

@font-face {
font-family: 'Red Hat Display Light';
src: url('https://static1.squarespace.com/static/633c78bee905530d06317820/t/6342b95dbd53a31424a70c99/1665317213853/RedHatDisplay-Light.ttf'); }

h2 {font-family: 'Red Hat Display Light';}
h3 {font-family: 'Red Hat Display Light';}
h4 {font-family: 'Red Hat Display Light';}
p {font-family: 'Red Hat Display Light';}
m {font-family: 'Digger';}

/* monospace */
pre code {
    font-family: Red Hat Display Light !important;
}

.header-nav-item a {
  font-family: 'Red Hat Display Light' !important;
}

nav.header-menu-nav-list a {
    font-family: 'Red Hat Display Light' !important;
}

.collection-type-products .ProductItem-details .product-price,
.ProductItem-nav-breadcrumb,
body:not( .button-style-default ) .sqs-add-to-cart-button,
.nested-category-children

  {
  
    font-family : Red Hat Display Light;
    
    }

#cart ._3qWE9VU-U span:first-child {

  font-family : Red Hat Display Light;
  
  }

/* Promotional popup custom font */
.sqs-popup-overlay-content * {
    font-family: 'Red Hat Display Light' !important;
}

.nested-category-breadcrumb {
  font-family:'Red Hat Display Light';
}
.nested-category-title {
  font-family:'Red Hat Display Light';
}

.tweak-product-item-details-show-title .ProductItem-details h1.ProductItem-details-title {
  font-family: 'Red Hat Display Light';
}

.product-block .productDetails .product-title {
    font-family: Red Hat Display Light;
}

.products.collection-content-wrapper .grid-main-meta .grid-title, .product-price {
    font-family: 'Red Hat Display Light' !important;
}
 

Try this to Settings > Advanced > Code Injection > Header

<style>
  .products.collection-content-wrapper .grid-main-meta .grid-title, .product-price {
    font-family: 'Red Hat Display Light' !important;
}
</style>