Change font of product titles only

Hi there,

Thanks for reaching out.

It looks like your website is behind the coming soon mode. Is it possible for you to disable this so we can check the site how it’s looking now?

Let me know how it goes!

Best,

It has been published. Thank you!

Hi @hautecreations

Can you please share more details where you want to change the font of product titles?

I have just checked your website and I can see different fonts for product titles on the category page (https://www.delicatefabrics.net/product-category/silk/silkdupioni/) and single product page (https://www.delicatefabrics.net/product/ss60w/?attribute_colors=Plantation+%28Pantone+18-0832+TCX%29).

There are multiple issues, I’m just tackling one at a time. Right now, this is the product title to which I’m referring.

https://www.delicatefabrics.net/product-category/silk/silkdupioni/

Right now it’s in Rosello-Deco but I want it to be FuturaLT

Hi @hautecreations

I have tried to change the font using Custom CSS, and here is the output: https://d.pr/i/OFipah

You can try the below CSS code:

/* change font family | 5559697-zen | NS */

h2.woocommerce-loop-product__title {
    font-family: 'FuturaLT' !important;
}

To implement the above Custom CSS, kindly navigate to WP Admin > Appearance > Customize > Additional CSS > and add the Custom CSS there.

Let us know if this works for you.

That worked BEAUTIFULLY! Thank you. Two more!

For the single product pages, the title should be in Rosella-Deco: https://www.delicatefabrics.net/product/ss60w/?attribute_colors=Plantation+%28Pantone+18-0832+TCX%29

For the category pages (https://www.delicatefabrics.net/product-category/silk/) the category titles and the number in parenthesis should be in FuturaLT.

Just in case there is a better way to do this, I am sharing all I currently have in my Additional CSS.

.site-header .site-branding img{
            max-height: 175px !important;
}
.site-header .site-branding img{
            max-width: 170px !important;
}
.site-header .custom-logo-link {
    display: flex;
    align-items: center;
}
.site-header .custom-logo-link::after {
!important;    
	content: "Affordable elegance at your fingertips.";
  	padding-left: 20px; !important
}
	.site-footer .site-info {
    	padding-top: 5;
			padding-bottom: 0;
	}
}
.site .entry-header {
  display: none;
}
@font-face {
    font-family: "Rosella-Deco";
    src: url(/wp-content/themes/storefront/assets/fonts/Rosella-Deco.ttf);
}
@font-face {
    font-family: "FuturaLT";
    src: url(/wp-content/themes/storefront/assets/fonts/FuturaLT.ttf);
}
body, button, input, textarea, select{ font-family: FuturaLT
}
h1, h2, h3, h4, h5, h6{ font-family: "Rosella-Deco"; 
}
.single-product h1.product_title.entry-title {
  font-size: 20px;
	font-family: "FuturaLT"
}
input,
select,
textarea,
.hentry .entry-content .wp-block-button .wp-block-button__link,
a.button,
a.button:visited,
button,
html input[type=button],
input[type=reset],
input[type=submit],
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
border-radius: 20px;
}
a.wp-block-button__link.add_to_cart_button.ajax_add_to_cart {
  border-radius: 15px;
}
.site-info {
    text-align: center;
}
.storefront-primary-navigation .site-header-cart {
  margin-top: -220px;
}

.storefront-primary-navigation .main-navigation {
  width: 100% !important;
}
footer#colophon .col-full {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
footer#colophon .footer-widgets {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
/* change font family | 5559697-zen | NS */

h2.woocommerce-loop-product__title {
    font-family: 'FuturaLT' !important;
}

Hi @hautecreations

You can try the below CSS code:

/* change font family for titles in single product and category pages | 5559697-zen | NS */

h1.product_title.entry-title {
    font-family: 'Rosella-Deco' !important;
}

h2.woocommerce-loop-category__title {
    font-family: 'FuturaLT' !important;
}

To implement the above Custom CSS, kindly navigate to WP Admin > Appearance > Customize > Additional CSS > and add the Custom CSS there.

Let us know if this works for you.

Is that in addition to the one above or am I replacing the first CSS with the one you just sent?

Hi @hautecreations

Is that in addition to the one above or am I replacing the first CSS with the one you just sent?

You will add the CSS in addition to the one above. ??

Let us know if this works for you.

That worked perfectly! Thank you so much!

Hi @hautecreations

That worked perfectly! Thank you so much!

You are welcome and I am glad that I could help! ??

Please let us know if any additional issues arise!

Thank you!