Dawn Theme - Changing Font Size

Solved
secco
New Member
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
3319 628 951

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

We are volunteering to help    |      Likes and Accept as Solution  will be much appreciated.✌
Having trouble?  Hire us! For fast reply, shoot us a message using chat at Made4Uo.com

Check how to sell everywhere with Shopify POS. Keep your stuffs private. Refrain from giving unnecessary access to your store.

View solution in original post

Replies 15 (15)
made4Uo
Shopify Partner
3319 628 951

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

We are volunteering to help    |      Likes and Accept as Solution  will be much appreciated.✌
Having trouble?  Hire us! For fast reply, shoot us a message using chat at Made4Uo.com

Check how to sell everywhere with Shopify POS. Keep your stuffs private. Refrain from giving unnecessary access to your store.
secco
New Member
2 0 0

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

made4Uo
Shopify Partner
3319 628 951

Glad to help!

We are volunteering to help    |      Likes and Accept as Solution  will be much appreciated.✌
Having trouble?  Hire us! For fast reply, shoot us a message using chat at Made4Uo.com

Check how to sell everywhere with Shopify POS. Keep your stuffs private. Refrain from giving unnecessary access to your store.
Joan65
Tourist
18 0 1

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

Joan Smith
made4Uo
Shopify Partner
3319 628 951

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

We are volunteering to help    |      Likes and Accept as Solution  will be much appreciated.✌
Having trouble?  Hire us! For fast reply, shoot us a message using chat at Made4Uo.com

Check how to sell everywhere with Shopify POS. Keep your stuffs private. Refrain from giving unnecessary access to your store.
animesneakers
New Member
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
3319 628 951

@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

 

 

We are volunteering to help    |      Likes and Accept as Solution  will be much appreciated.✌
Having trouble?  Hire us! For fast reply, shoot us a message using chat at Made4Uo.com

Check how to sell everywhere with Shopify POS. Keep your stuffs private. Refrain from giving unnecessary access to your store.
Joan65
Tourist
18 0 1

Actually I wanted to change to a different font.

Joan Smith
Joan65
Tourist
18 0 1

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

 

Thank very much.

Joan Smith
made4Uo
Shopify Partner
3319 628 951

@Joan65 its password protective

 

We are volunteering to help    |      Likes and Accept as Solution  will be much appreciated.✌
Having trouble?  Hire us! For fast reply, shoot us a message using chat at Made4Uo.com

Check how to sell everywhere with Shopify POS. Keep your stuffs private. Refrain from giving unnecessary access to your store.
made4Uo
Shopify Partner
3319 628 951

@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;

}

We are volunteering to help    |      Likes and Accept as Solution  will be much appreciated.✌
Having trouble?  Hire us! For fast reply, shoot us a message using chat at Made4Uo.com

Check how to sell everywhere with Shopify POS. Keep your stuffs private. Refrain from giving unnecessary access to your store.
Schmetterling
New Member
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
New Member
1 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
3319 628 951

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

}

We are volunteering to help    |      Likes and Accept as Solution  will be much appreciated.✌
Having trouble?  Hire us! For fast reply, shoot us a message using chat at Made4Uo.com

Check how to sell everywhere with Shopify POS. Keep your stuffs private. Refrain from giving unnecessary access to your store.