How to change font for product description ONLY (DAWN theme)

Store Design

AI-generated summary

Goal: change the font for the product description only in Shopify’s Dawn (Online Store 2.0).

  • Solution provided: add a CSS rule targeting .product__description.rte at the bottom of assets/section-main-product.css. Replace placeholders with the desired font-family and color.
  • Mobile-only styling: wrap the rule in a media query using @media screen and (max-width: 749px). Prior attempts using @include screen($small) did not work (Sass mixin not applicable here).
  • Tabs exception: the description rule does not affect product tabs. To style tabs, edit component-accordion.css and target .accordion__content. The original poster confirmed this worked.

Current status and outcomes:

  • Product description font change: resolved.
  • Mobile-specific styling: guidance provided via media query.
  • Product tabs styling: resolved by editing component-accordion.css.
  • New, unresolved request: another participant asks how to change the product title font only and where to add code (seeking step-by-step guidance). No direct answer yet; discussion remains open for this item.
1

Just installed the new DAWN theme with shopify OS 2.0 and I can’t figure out where I can change the font in the code for the product description only?

So I have the code to change font and size etc, just have no clue where to place it.

Thanks in advance for your support

2

@Shopfashion1

You can use the following code to change the font. You need to add this at the bottom of your assets/section-main-product.css file.

.product__description.rte{
font-family: "Your font name here.." !important;
color: your color code here..
}

Note: You have to change your font name and color in the above code.

3

Thank you! It’s working but how can I make it mobile(small screen) only, the code I used before isn’t working

I tried: @include screen($small) & @media screen and (max-width: 749px)

I also noticed it doesn’t apply to the product tabs(from the theme itself, not any 3d party app). Where do I add the code to change the font for the tabs too?

Appreciate your support!

4

@Shopfashion1

For the mobile you can use the following media.

@media screen and (max-width: 749px){
Your code here..
}

Code will work for description text only not for tabs etc. If you provide your store URL. I can check in detail.

5

I found the section where I could paste the code to change the font of the tabs:

Component-accordion.css → .accordion__content

Thanks for your support!

6

Hi!

I’m having the same question. I want to change the font of my product title only, in Dawn, but I can’t follow these directions. I am brand new to Shopify, and am trying this on a Chromebook, but do not see where I should add this info to. I accept that it’s a hole in my knowledge and was hoping you could help.

Thanks,

Lesa