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

[secco]

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 

[made4Uo · 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

[secco]

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

[made4Uo]

Glad to help!

[Joan65]

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

[made4Uo]

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

[animesneakers]

Hello!

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

[made4Uo]

@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

[Joan65]

Actually I wanted to change to a different font.

[Joan65]

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

Thank very much.

[made4Uo]

@Joan65 its password protective

[made4Uo]

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

}

[Schmetterling]

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]

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?

[Bingling]

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? 

"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]

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 there

[made4Uo]

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

}