Change Product Page Title font size in Dawn Version 15.0.0

[alessa86]

Is it possible to change the title font size in the Title of Product Page on Dawn´s theme? I´ve tried a couple of things but neither seem to work.

Added this code at the end of base.css

.product_title h1 {
font-size: 30x
}

Added this code at the end of assets/section-main-product.css

}
h1.product__title {
font-size: 20px;
}

Can´t seem to make any chage.

It would also be nice to know if I can change font sizes in different parts of the web, such as product description.

[Dan-From-Ryviu]

Hi @alessa86 

You can try to add this code to your base.css file 

@media (min-width: 990px) {
.product_title h1 {
font-size: 30px !important;
}
}

[alessa86]

Did not work for me, thank you for your response!

[BSSCommerce-HDL]

Hi @alessa86, 

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above </head> tag: 

<style>
.product_title h1 {
   font-size: 30px !important;
}

h1.product__title {
  font-size: 20px !important;
}
</style>

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

[alessa86]

This didn´t work for me, thank you for your support!

[Laurie_ONeill · Accepted solution]

I just spent all day yesterday figuring this out! Finally got this to work. On main-product.liquid, put this right before the  {%- endstyle -%} part.

.product__title > * {
margin: 0;
font-size: 2.2rem;!important
}

You can adjust the 2.2 to whatever size you want it to be after you see it. I found that to be a much better size than the giant one it comes with!

[alessa86]

thank you this was really helpful! 

Do you know how to change the font of the description?

[niraj_patel]

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid
<style>
   .product__title h1 {
      font-size: 30px !important;
   }

   .product__description.rte.quick-add-hidden {

        font-size: 16px !important;

    }

</style>
Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

[BSS-TekLabs]

- Here is the solution for you @alessa86 

- Find the base.css file.
- Then add the following code at the end of the file and press 'Save' to save it.

.product_title h1 {
font-size: 30x !important;
}
h1.product__title {
font-size: 20px !important;
}

- Please press 'Like' and mark it as 'Solution' if you find it helpful. Thank you.