Change Title Font Style in Product Block?

Site URL: https://www.nesthomeware.com/cast-iron-sets

Hi all,

I'm creating pages (rather than categories, for SEO purposes) to show similar groups of products in addition to my main Store page. To do this, I'm using Product Blocks.

The default Product Block fonts for product details are different than on Store Pages, but I'd like for them to be the same (following the same styling as the Store Pages). 

See links below for example.

https://www.nesthomeware.com/shop : The product titles here follow the heading text font. I like it!

https://www.nesthomeware.com/cast-iron-sets : The product titles here follow the body text font. I'd like to change it to the heading text, as above.

Is there a simple code fix here that can be injected to these specific pages?

Thanks!

-Matt

Add to Page Settings > Advanced > Header

<style>
  .product-block .productDetails .product-title {
    font-family: orpheus-pro;
    font-weight: 400;
    font-style: normal;
    letter-spacing: 0em;
    text-transform: none;
    line-height: 1.4em;
    font-size: calc(.24vw + 1rem);
}
</style>

This worked perfectly, thank you!

Hi guys, I'm dealing with the same problem. The code above almost worked but I can't figure out how to adjust the price below the title of the product blocks. 

I'm trying to match the style and look of this - https://swan-hen-n4m6.squarespace.com/purchase-catalogues

I got close but it's not quite there yet - https://swan-hen-n4m6.squarespace.com/kids-classes-camps 

Any help would be greatly appreciate it. Thanks!

9 hours ago, Amador said:

Hi guys, I'm dealing with the same problem. The code above almost worked but I can't figure out how to adjust the price below the title of the product blocks. 

I'm trying to match the style and look of this - https://swan-hen-n4m6.squarespace.com/purchase-catalogues

I got close but it's not quite there yet - https://swan-hen-n4m6.squarespace.com/kids-classes-camps 

Any help would be greatly appreciate it. Thanks!

<style>
  .product-price {
    font-size: 10px !important;
    color: red;
}
</style>

Thank you so much! I really should just learn how to code 🙂

Hey, 

I uploaded a font to my site called Panamera and would like to use it site wide. instead of having multiple font styles.

My site is https://www.tribeandsol.com 

Thanks

13 hours ago, Ndi said:

Hey, 

I uploaded a font to my site called Panamera and would like to use it site wide. instead of having multiple font styles.

My site is https://www.tribeandsol.com 

 

Thanks

Answered on other question.

Hey does anyone know who to also change the fonts on the page that shows just one of your products? I can't find it anywhere! Thanks so much for the help. 

this is one of the pages I'm trying to add my custom fonts to: https://www.andthenjewelry.com/collections/beni-shoga-n8amh

18 hours ago, mccallkeller said:

Hey does anyone know who to also change the fonts on the page that shows just one of your products? I can't find it anywhere! Thanks so much for the help. 

this is one of the pages I'm trying to add my custom fonts to: https://www.andthenjewelry.com/collections/beni-shoga-n8amh

 

Which elements?

Hi All, facing the same problem but with the font size on the 'view all' section with product categories. The font size doesn't seem too large for desktop view but it's not responsive and doesn't adjust when the screen is shrunk and the text cuts off in mobile view – any help? (screenshots attached).

Link to site: https://trombone-bumblebee-yms9.squarespace.com/config/pages/5f69e05dba1bde0a4560f05c

pw: camilamesquita

Template: Maru

Cheers!
Nabil 

1 hour ago, noblestudio said:

Hi All, facing the same problem but with the font size on the 'view all' section with product categories. The font size doesn't seem too large for desktop view but it's not responsive and doesn't adjust when the screen is shrunk and the text cuts off in mobile view – any help? (screenshots attached).

Link to site: https://trombone-bumblebee-yms9.squarespace.com/config/pages/5f69e05dba1bde0a4560f05c

pw: camilamesquita

Template: Maru

Cheers!
Nabil 

/config is url for site owner

Sorry! here's the url: https://trombone-bumblebee-yms9.squarespace.com/products password as above.

Cheers! @tuanphan 

15 hours ago, noblestudio said:

Sorry! here's the url: https://trombone-bumblebee-yms9.squarespace.com/products password as above.

Cheers! @tuanphan 

@tuanphan Managed to find the solution from another thread that was resolved by you! It seems when using this code to customise the size for product category title, it becomes responsive in mobile – which is great!

/* category title size */
h3.nested-category-title {
    font-size: 42px !important;
}

Thanks for the help! 

N

Hi there, thanks for this! Worked for me, but how do I keep the calculating font size for different screens that's in this code but make it a fixed size on the mobile version of the site? Thanks!

On 7/5/2020 at 12:10 PM, tuanphan said:

Add to Page Settings > Advanced > Header

<style>
  .product-block .productDetails .product-title {
    font-family: orpheus-pro;
    font-weight: 400;
    font-style: normal;
    letter-spacing: 0em;
    text-transform: none;
    line-height: 1.4em;
    font-size: calc(.24vw + 1rem);
}
</style>

 

On 5/31/2023 at 5:20 PM, Molololol said:

Hi there, thanks for this! Worked for me, but how do I keep the calculating font size for different screens that's in this code but make it a fixed size on the mobile version of the site? Thanks!

 

What is your site url? I guess each site will have a different size settings

On 6/2/2023 at 11:52 PM, tuanphan said:

What is your site url? I guess each site will have a different size settings

Sorry I just saw this, I managed to work it out - thanks for your reply!

Hi, i have added custom text and am using it throughout the website; however I can't find a way to change the product title text. I saw some code in another thread, but when I went into the settings for this page here are the options I see. So I copied the code using the font in the code but it didn't change anything. Please help.

This is the code I used: 

<style>
  .product-block .productDetails .product-title {
    font-family: orpheus-pro;
    font-weight: 400;
    font-style: normal;
    letter-spacing: 0em;
    text-transform: none;
    line-height: 1.4em;
    font-size: calc(.24vw + 1rem);
}
</style>

On 12/14/2023 at 4:29 AM, Mancala said:

This is the code I used: 

<style>
  .product-block .productDetails .product-title {
    font-family: orpheus-pro;
    font-weight: 400;
    font-style: normal;
    letter-spacing: 0em;
    text-transform: none;
    line-height: 1.4em;
    font-size: calc(.24vw + 1rem);
}
</style>

Can you share link to page? We can check easier

Hi I tried that code. Where did you use it? Is it in the same area as the screenshot I provided?

Page header code injection?

I have tried adding this code to the custom css as well.

On 12/16/2023 at 12:15 AM, Mancala said:

Hi I tried that code. Where did you use it? Is it in the same area as the screenshot I provided?

Page header code injection?

Page Header Code Injection. If you add to CSS box, it will cause syntax error

Hi! @tuanphan

Having the same issue, I would love to edit the product block titles but there is no option available in site styles to edit the title font like there is with everything else, only the colour. I would also love to change the padding to have each product block a lot closer together if possible.

These are the desired font styles for the product titles:

Ubuntu Mono

Weight 400

Style normal

Size 9px

Letter spacing 0.2em

Line height 2em

Thanks so much 🙏

https://dinner-with-friends.com/welcome

10 hours ago, C-bear said:

Hi! @tuanphan

Having the same issue, I would love to edit the product block titles but there is no option available in site styles to edit the title font like there is with everything else, only the colour. I would also love to change the padding to have each product block a lot closer together if possible.

These are the desired font styles for the product titles:

Ubuntu Mono

Weight 400

Style normal

Size 9px

Letter spacing 0.2em

Line height 2em

 

Thanks so much 🙏

 

https://dinner-with-friends.com/welcome

I see product price only