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

Shopify Discussion

Topic summary

Main issue: Product descriptions display inconsistent fonts despite Josefin Sans being set as the body font in theme typography.

Findings:

  • Root cause identified as inline CSS within some product descriptions, which overrides theme styles. Rich text/embedded styles in the editor may contribute.
  • Inconsistencies likely vary by selectors across different product templates/sections.

Actions suggested:

  • Clear formatting in affected product descriptions to remove embedded styles (partial success).
  • Inspect elements to find overriding classes/inline styles.
  • Add a CSS rule in the theme stylesheet to force Josefin Sans on the product description with an !important declaration.
  • Edit theme.liquid and add a custom snippet for product pages to apply the store’s configured font without hard-coding; include it via render.

Outcomes:

  • Initial changes fixed some products, but others still show incorrect fonts. Clearing formatting did not resolve all.

Next steps:

  • Share URLs of remaining problematic products so selectors can be reviewed and a targeted fix proposed.

Status: Partially resolved; issue remains open pending further diagnostics on specific product pages. Screenshots and code edits/snippets are central to the solution.

Summarized with AI on December 14. AI used: gpt-5.
3

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.
  1. 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.

  1. 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