Dawn Theme - Changing Font Size

Solved
secco
Visitor
2 0 0

Hi there,

I would like to change the size of the heading (H1 I presume?) font on my pages and can't seem to find a way to do this.

I thought I could easily fix it through a sizing dropdown list the typography section in Editor but it wasn't there.

I've looked through the code editor and found a bunch of H1s, H2s, H3s.. etc, but I'm not quite sure what it is I should be doing or looking out for.

Wondering if anyone else is having similar problems or has come up with a solution for this, would really appreciate the help.

 

Thank you!

This is my url 

Accepted Solution (1)
made4Uo
Shopify Partner
3785 710 1094

This is an accepted solution.

You are right. It would be either h1 or h2. This is at the Asset folder, under the base.css. FInd the code .h1, h1 { } or .h2, h2 {} with a font-size. You can adjust the font by reducing the rem. NOTE: Dawn Theme uses rem, instead of pixels. It means it rely to the root font size, which is in the theme.liquid file, under the layout folder. The main root of the sizes came from html, which has a font size in percentage. I believe in Dawn theme, their 1 rem is equal to 10px. Let me know if that helps

Volunteering to assist you!  Likes and Accept as Solution  is highly appreciated.✌
Coffee fuels my dedication. If helpful, a small Coffee Tip would be greatly appreciated.
Need EXPERIENCED Shopify developer without breaking the bank?
Hire us at Made4Uo.com for quick replies.
Stay in control and maintain your security by avoiding unnecessary store access!

View solution in original post

Replies 15 (15)
made4Uo
Shopify Partner
3785 710 1094

This is an accepted solution.

You are right. It would be either h1 or h2. This is at the Asset folder, under the base.css. FInd the code .h1, h1 { } or .h2, h2 {} with a font-size. You can adjust the font by reducing the rem. NOTE: Dawn Theme uses rem, instead of pixels. It means it rely to the root font size, which is in the theme.liquid file, under the layout folder. The main root of the sizes came from html, which has a font size in percentage. I believe in Dawn theme, their 1 rem is equal to 10px. Let me know if that helps

Volunteering to assist you!  Likes and Accept as Solution  is highly appreciated.✌
Coffee fuels my dedication. If helpful, a small Coffee Tip would be greatly appreciated.
Need EXPERIENCED Shopify developer without breaking the bank?
Hire us at Made4Uo.com for quick replies.
Stay in control and maintain your security by avoiding unnecessary store access!
secco
Visitor
2 0 0

Thank you so much! Your advice worked like a charm.

made4Uo
Shopify Partner
3785 710 1094

Glad to help!

Volunteering to assist you!  Likes and Accept as Solution  is highly appreciated.✌
Coffee fuels my dedication. If helpful, a small Coffee Tip would be greatly appreciated.
Need EXPERIENCED Shopify developer without breaking the bank?
Hire us at Made4Uo.com for quick replies.
Stay in control and maintain your security by avoiding unnecessary store access!
Joan65
Tourist
19 0 1

Hello there.  Could you tell me how to change font in announcement bar for dawn theme.  

Joan Smith
made4Uo
Shopify Partner
3785 710 1094

Yes. If it is specific font. You have to obtain the class using dev tools. Do you mind sharing your website url?

Volunteering to assist you!  Likes and Accept as Solution  is highly appreciated.✌
Coffee fuels my dedication. If helpful, a small Coffee Tip would be greatly appreciated.
Need EXPERIENCED Shopify developer without breaking the bank?
Hire us at Made4Uo.com for quick replies.
Stay in control and maintain your security by avoiding unnecessary store access!
animesneakers
Visitor
2 0 1

Hello!

 

do you know what I would go about changing to change the variant font size and variant title size?

made4Uo
Shopify Partner
3785 710 1094

@animesneakers 

You have to use the devTools to locate the class that needs to be change, since every store has different ID on the product page

 

 

Volunteering to assist you!  Likes and Accept as Solution  is highly appreciated.✌
Coffee fuels my dedication. If helpful, a small Coffee Tip would be greatly appreciated.
Need EXPERIENCED Shopify developer without breaking the bank?
Hire us at Made4Uo.com for quick replies.
Stay in control and maintain your security by avoiding unnecessary store access!
Joan65
Tourist
19 0 1

Actually I wanted to change to a different font.

Joan Smith
Joan65
Tourist
19 0 1

Hi there, my url is https://joan-249.myshopify.com/.

 

Thank very much.

Joan Smith
made4Uo
Shopify Partner
3785 710 1094

@Joan65 its password protective

 

Volunteering to assist you!  Likes and Accept as Solution  is highly appreciated.✌
Coffee fuels my dedication. If helpful, a small Coffee Tip would be greatly appreciated.
Need EXPERIENCED Shopify developer without breaking the bank?
Hire us at Made4Uo.com for quick replies.
Stay in control and maintain your security by avoiding unnecessary store access!
made4Uo
Shopify Partner
3785 710 1094

@Joan65 

Actually for the announcement bar font size you can use the code below. Just change px, on the size you want

 

#shopify-section-announcement-bar > div > p {

font-size: 14px !important;

}

Volunteering to assist you!  Likes and Accept as Solution  is highly appreciated.✌
Coffee fuels my dedication. If helpful, a small Coffee Tip would be greatly appreciated.
Need EXPERIENCED Shopify developer without breaking the bank?
Hire us at Made4Uo.com for quick replies.
Stay in control and maintain your security by avoiding unnecessary store access!
Schmetterling
Visitor
1 0 0

Hi Made4Uo,

Where do I have to add the following code to make the text bigger in the announcement bar in the dawn theme? It would be so helpful to know because the text is very small in the announcement bar. I would be very pleased for some help.

 

#shopify-section-announcement-bar > div > p {

font-size: 14px !important;

}

RaniaHa
Tourist
3 0 1

Hello there!

I followed your instructions and reduced the rem from 3 to 1, I saved the changes and went to the product page but the font size of the H1 heading is still the same 😞  what did I do wrong?

Screen Shot 2022-12-04 at 1.28.20 PM.png

elodie_c
Visitor
2 0 0

hi,

 

this is great advice and I manged to change some of the fonts. 

I really want to change the heading menu and also the text in between but not sure what H it is. I tried changing all the H1-H6 but nothing seems to change thereScreen Shot 2022-04-22 at 10.29.49.png

made4Uo
Shopify Partner
3785 710 1094

That is a <p> tag. Try this code below but this well change all the p tags. I would suggest to find the class corresponds to the p tag

 

p {

font-size: 14px

}

Volunteering to assist you!  Likes and Accept as Solution  is highly appreciated.✌
Coffee fuels my dedication. If helpful, a small Coffee Tip would be greatly appreciated.
Need EXPERIENCED Shopify developer without breaking the bank?
Hire us at Made4Uo.com for quick replies.
Stay in control and maintain your security by avoiding unnecessary store access!