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:
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.
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.
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.
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:
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!
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.
Create a snippet called ‘custom-product-styles’ and add the below code:
{% if template contains 'product' %}
{% 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.
Include the ‘custom-product-styles.liquid’ file in your “theme. liquid” file.
Add the following include code to your theme.liquid file.
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.
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.
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?
