- This topic has 8 replies, 2 voices, and was last updated 3 weeks, 5 days ago by
vako.
-
AuthorPosts
-
December 31, 2024 at 1:33 pm #76180
How can I change the font of headers on product pages? Ashe shows a different font for H2 headers on woocommerce product pages then other (blog) pages. See example: https://www.chelise.nl/webshop/winter-speurtocht/.
I don’t like this font because it’s hard to read. I would like it to be the same as the headers on my other pages. For example: https://www.chelise.nl/doelen-bereiken/. What is also weird, is that H3 headers look different then H2 headers. It’s not uniform (much bigger, different font). It doesn’t look good on a product page.
But I can’t find a way to change the font. There’s no option in the customizer menu. Please advice.
January 2, 2025 at 10:35 pm #76182Hi Chantal,
Sorry for the late reply we have been on holidays
To be honest we cant find the differences when we load your website, as you can see from this screenshot: https://prnt.sc/1BWgMxgQPlio all heading fonts have the same Font Family there is only a difference in font size.
Kind Regards
January 2, 2025 at 11:36 pm #76183Hi Vako,
I think there´s a misunderstanding. I mean the H2 header on a product page. See screenshot:
January 4, 2025 at 1:49 am #76184Hi Chantal,
Now we see it more clearly! There is 1 major difference the h2 title on the product page is uppercase and on the post page is capitalized, so this difference makes feeling that they are different fonts when they are the same. In the screenshot below, we will remove an uppercase style from the h2 title on the product page and you can see they are the same: https://prnt.sc/Ufmmkz5xGGkE
Kind Regards
January 6, 2025 at 12:22 am #76185Hi Vako,
Yes I understand it is uppercase, but how do I change this? In the backend there is no uppercase. The theme automatically displays an uppercase “font”. I don’t like it. Is there a way to change the settings?
January 6, 2025 at 11:07 pm #76187Hi Chantal,
Please navigate to Dashboard > Appearance > Customize > Additional CSS and add the CSS snippet below:
.woocommerce div.product .woocommerce-tabs .panel > h2 {
text-transform: capitalize !important;
}
Kind Regards
January 7, 2025 at 12:01 am #76188Hi Vako
Thank you. The uppercase is now gone, but still the headers don´t look the same. They are much smaller. And also every word starts with a capital now. For example: https://www.chelise.nl/webshop/babyshower-invulkaarten-blauw/?
January 9, 2025 at 3:07 pm #76197January 9, 2025 at 11:30 pm #76198Hi Chantal,
Please navigate to Dashboard > Appearance > Customize > Additional CSS and add the CSS snippet below:
h2 {
text-transform: capitalize !important;
font-size: 36px !important;
}
Kind Regards
-
AuthorPosts
- You must be logged in to reply to this topic.