What's your biggest current challenge? Have your say in Community Polls along the right column.

How can I change the font size in the Dawn theme?

Solved

How can I change the font size in the Dawn theme?

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
3856 717 1199

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

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free

View solution in original post

Replies 16 (16)

made4Uo
Shopify Partner
3856 717 1199

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

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free
secco
Visitor
2 0 0

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

made4Uo
Shopify Partner
3856 717 1199

Glad to help!

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free
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
3856 717 1199

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

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free
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
3856 717 1199

@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

 

 

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free
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
3856 717 1199

@Joan65 its password protective

 

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free
made4Uo
Shopify Partner
3856 717 1199

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

}

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free
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
6 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

Bingling
New Member
10 0 0

Hello, I would like to change too but I couldn't find where it is.

The 62.5% shall I change to how much if I want to make it one time smaller? 

Screenshot 2023-12-10 at 22.31.23.png

"Suivre la commande" is too large as title.

 

Here is the code: 

html {
box-sizing: border-box;
font-size: calc(var(--font-body-scale) * 62.5%);
height: 100%;
}

body {
display: grid;
grid-template-rows: auto auto 1fr auto;
grid-template-columns: 100%;
min-height: 100%;
margin: 0;
font-size: 1.5rem;
letter-spacing: 0.06rem;
line-height: calc(1 + 0.8 / var(--font-body-scale));
font-family: var(--font-body-family);
font-style: var(--font-body-style);
font-weight: var(--font-body-weight);
}

@media screen and (min-width: 750px) {
body {
font-size: 1.6rem;
}

 

 

 

Thank you so much!

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
3856 717 1199

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

}

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free