Product Description Changed to Different Font than set up under Typography Section

[LouisaLTF]

Hello,

I have recently set up some new products on my Shopify shop, and strangely they all have a different font on the product description and some of my older products are also showing that now.

I have Josefin Sans set up as my body font in the settings > typography section. And this was previously working. On some of my older products my body copy is still in Josefin Sans (but not on all), see example:

 https://www.letterstofinley.co.uk/collections/greetings-cards/products/cocktails-birthday-card

However, some of the other products are showing completely different fonts and styles on the product description:

https://www.letterstofinley.co.uk/collections/home-fragrance/products/winter-spice-diffuser

https://www.letterstofinley.co.uk/collections/home-fragrance/products/amber-myrrh-candle

I really want them to all be consistently Josefin Sans.

Can you help with this please?

Thanks

[Moeed]

Hey @LouisaLTF 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
.product__section--desc.product__description-container.rte p span {
    font-family: 'Josefin Sans' !important;
}
</style>

RESULT:

If I managed to help you then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[LouisaLTF]

Thank you so much! It has fixed it

[Moeed]

Thank you for your reply. I'm glad to hear that the solution worked well for you. If you require any more help, please don't hesitate to reach out. If you find this information useful, a Like would be greatly appreciated.

[LouisaLTF]

Actually it didnt work on all of them, just some...

[rajweb]

Hey @LouisaLTF ,

To ensure that all product descriptions display in Josefin Sans consistently, we can check for any potential issues that might override your global typography settings.

1. Inspect CSS Classes and Inline Styles:

• Shopify themes sometimes include custom CSS or inline styles within product descriptions that might override the global font settings. This can happen especially if there’s any rich text formatting in the product description editor.
• Open each product page, right-click on the product description text, and select "Inspect" to check for any inline styles or classes that might specify a different font.

2. Clear Product Description Formatting:

-In Shopify Admin, go to the product descriptions for the affected products.

-Select the entire text and click on the "Clear formatting" option (usually represented by an eraser icon in the editor toolbar). This removes any embedded styles from the text.

-Re-apply Josefin Sans in the settings or use custom CSS as needed.

3. Override CSS in Theme Editor:

-Go to Online Store > Themes > Edit code.

-Open your CSS file (often named  theme.css or styles.css).

-Add a custom style to enforce Josefin Sans on all product descriptions:

css:

.product-single__description {
    font-family: 'Josefin Sans', sans-serif !important;
}

This should ensure that Josefin Sans is applied regardless of any inline styling.

-After making changes, clear your browser cache and check the product pages to confirm the font consistency.

If I was able to help you, please don't forget to Like and mark it as the Solution!
If you’re looking for expert help with customization or coding, I’d be delighted to support you. Please don’t hesitate to reach out via the email in my signature below—I’m here to help bring your vision to life!

Best Regard,
Rajat Sharma

[swym]

Hey @LouisaLTF, 

I checked into the issue, and it looks like the product descriptions you're adding have some inline CSS. This is overriding your theme’s styling, which is why you’re seeing a different font in the descriptions. Check out the screenshot below for details.

To fix this, please follow the below steps:

1. Open the code editor, as shown in the screenshot below.

2. Create a snippet called ‘custom-product-styles’ and add the below code:

{% if template contains 'product' %}
  <style> 
    .product__section--desc.product__description-container.rte p span {
      font-family: var(--main-family) !important;
      font-size: inherit !important;
    }
  </style>
{% endif %}

[NOTE]: I haven’t hard-coded the font family here. This way, if you adjust your store fonts in the future, those changes will automatically reflect in this section. Instead, I’ve directly used the font family you’ve set in the customization settings.

3. Include the ‘custom-product-styles.liquid’ file in your “theme. liquid” file.
Add the following include code to your theme.liquid file.

{% render 'custom-product-styles' %}

It would look something like below:

4. Done? Save the file, and try previewing to confirm if the changes work for you.  In the reference above, it looks something like below:

Also, in the future, please make sure that any descriptions you add to your products don’t include inline CSS. Be sure to remove any inline styles before adding the description to prevent this issue from occurring again.

I hope this helps!

Regards,
Abhishek from Swym 

[LouisaLTF]

Hi Abhishek, 

I tried this and unfortunately it has fixed some, but not others. 

I have tried to clear the formatting, but it doesnt appear to change it. 

[swym]

Hey @LouisaLTF, 

It could be that the selectors are different for the description in other products. Could you please share the product URLs where the issue still persists so I can review them and suggest an alternative solution?

Regards, 

Abhishek from Swym