Changing custom font in product title

On 6/14/2023 at 4:17 AM, CoorlasArchitecture said:

Hello - Having a similar issue with my main header title font. I want it to match the other headers I have on my remaining pages with is my header 2 and bolded. Also if possible I'd like to left justify it like the other pages:

https://www.coorlasarch.com/products

This title?

5 hours ago, tuanphan said:

This title?

Yes, exactly. I'd like that title "Products" to match my Heading 1 font in bold and left justified if possible.

It it also possible to reduce the product page width to match the other pages? 

On 6/15/2023 at 9:40 PM, CoorlasArchitecture said:

Yes, exactly. I'd like that title "Products" to match my Heading 1 font in bold and left justified if possible.

 

It it also possible to reduce the product page width to match the other pages? 

Add to Design > Custom CSS

h2.nested-category-title.nested-category-title-padding {
    justify-content: flex-start !important;
    font-weight: 700;
    font-family: 'Roboto';
    font-size: 3.9rem;
}
body.view-list section.products.collection-content-wrapper.products-list {
    max-width: 1200px;
}

Awesome Thank you so much. Can I also nudge the top padding? I know it's a very minor detail, but it's so close to match the other pages now.

I sincerely appreciate your efforts and am very grateful for your help.

On 6/20/2023 at 9:52 PM, CoorlasArchitecture said:

Awesome Thank you so much. Can I also nudge the top padding? I know it's a very minor detail, but it's so close to match the other pages now.

I sincerely appreciate your efforts and am very grateful for your help.

Just adding padding-top to second code

body.view-list section.products.collection-content-wrapper.products-list {
    max-width: 1280px;
    padding-top: 3vw;
}

Awesome, thank you so much. I see the font weight utilizes the rem, but it doesn't seem to be responsive like the other page header2 (h2) fonts. Is there anything preventing it front acting responsively?

14 hours ago, CoorlasArchitecture said:

Awesome, thank you so much. I see the font weight utilizes the rem, but it doesn't seem to be responsive like the other page header2 (h2) fonts. Is there anything preventing it front acting responsively?

Remove font-size: 3.9rem; in above code

Next add this code to adjust size

@media screen and (min-width: 768px ),screen and (max-width:calc(~"1620px - 1px)") and (orientation:landscape) {
   h2.nested-category-title.nested-category-title-padding {
        font-size:calc(~"(3.6 - 1) * 1.2vw + 1rem") !important;
    }
}
@media screen and (max-width: 767px ) and (orientation: portrait) {
   h2.nested-category-title.nested-category-title-padding {
        font-size:calc(~"(3.6 - 1) * calc(.012 * min(100vh, 900px)) + 1rem") !important;
    }
}

Thank you!

Hi there - having a similar issue with my product description page for the two products on my site. I have managed to change the font for my shop page, but when I click into the product description page the heading font for the product "The Arrival Bag" is shows italicized and in the wrong font.

https://www.thearrivalyoga.com/shop/p/sagecedarwood-b2wfg

Any ideas on script here? My uploaded custom font is 'KnockoutCruiserweight' in my CSS.

On 4/17/2024 at 12:56 AM, thearrivalyoga said:

Hi there - having a similar issue with my product description page for the two products on my site. I have managed to change the font for my shop page, but when I click into the product description page the heading font for the product "The Arrival Bag" is shows italicized and in the wrong font.

https://www.thearrivalyoga.com/shop/p/sagecedarwood-b2wfg

Any ideas on script here? My uploaded custom font is 'KnockoutCruiserweight' in my CSS.

I see you solved with this CSS code

.pdp-layout .pdp-details .pdp-details-title {
    font-family: 'KnockoutCruiserweight';
    font-size: 29px !important;
    font-style: normal !important;
}

Hi there, I have similar issue, but with the past discussion have been able to work with the product title, and description. But I need it to also work for the button as well. I need help with this ASAP, thanks

On 7/12/2024 at 2:17 PM, Danielshey said:

Hi there, I have similar issue, but with the past discussion have been able to work with the product title, and description. But I need it to also work for the button as well. I need help with this ASAP, thanks

You mean add to cart button? Can you share link to page?