Re: Dawn Theme - change font size without code?

Solved

Dawn Theme - change font size without code?

pureseeds
Tourist
10 0 8

Hello,

I've been testing out the new Dawn theme and so far I like the new customisation options, but I feel like a few things are missing.

I'm not sure if I've missed it somewhere but I can't find any option to change the font size within the theme editor. I've seen a few posts that show how to do it in the theme code with CSS but it really seems like something as simple as changing a font size should be available in the editor, without having to touch the code. Especially since the default font for product titles is so tiny - it's not very accessible. Have I missed this option somewhere? It seems like such a simple thing but I can't find a way to do it without coding.

Also, this has always been a problem with Shopify themes for me, but it appears there's still no easy way to change the height of an image banner without again going into the code editor? I just want to be able to upload an image and specify the height, or for it to at least adjust to the height of the image (it does this to an extent, but beyond a certain height it won't, e.g. if you upload a short image). Again, is there a way to do this that I'm missing, or is it only possible through code?

 

I'm just testing out this theme so I don't have a URL since it isn't live on my store. I was just wondering if anyone else who has used this theme is having similar problems or knows of a solution.

Thanks!

Accepted Solutions (2)
made4Uo
Shopify Partner
3839 716 1177

This is an accepted solution.

Hi @optostar,

You can change the font-size in the base.css. This is at the Asset folder, under the base.css. Find the code .h1, h1 { } or .h2, h2 {} or what ever code you want to edit with a font-size. You can reduce size of the font by reducing the rem.

NOTE: Dawn Theme uses rem, instead of pixels. It means it relies to the root font size, which is in the theme.liquid file, under the Layout folder. The main root of the font sizes came from html, which has a font size in percentage.

Code in the html look like this. 


html {
box-sizing: border-box;
font-size: 62.5%;
height: 100%;
}

The font-size: 62.5% is equal to 10px. Therefore, the 1rem 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

RC7
Excursionist
18 1 2

This is an accepted solution.

Hi @made4Uo 

Do you think it's better to change the rem instead of the overall percentage of the font size and make it higher than 62.5%?

Another thing I notice with dawn is that even with the same size and font family the font appears to be lighter. Do you know where I could change the font weight? 

View solution in original post

Replies 29 (29)

Zworthkey
Shopify Partner
5581 642 1575

Hii @pureseeds,
Give me Your Store URL so I will Give You a Proper Solution.
Thank You. 

 

Ajay-app-dev
Shopify Partner
178 16 14

Hi @pureseeds , For managing font size and image height and width, we usually do coding. For user or client interface, we create options to adjust the color , font size and image height/width in theme editor. Everything is done via code. We just create a settings in backend with code to have option to edit size and color on frontend for you.  I hope, it help you out, if still face problem, do let me know. 

Thanks 

Try Essentialwolf Upsell & Cross Sell (★★★★★ 5+ star) App

- Was your question answered? Mark it as an Accepted Solution
- Learn more about us at www.essentialwolf.com

BSalim
Excursionist
10 2 5

You can find the option for font size under Admin > Online Store > Themes > Customize, then on the left sidebar at the very bottom you will be able to see Theme settings which will open up a menu which has Typography, you should be able to change the font style there

pureseeds
Tourist
10 0 8

Hello,

I have tried changing it in that section but the only option is to change the font itself - there's no way to change the size. It definitely should be there, it's almost like it has been forgotten. Below is a screenshot of all the options available in the Typography section.

Thanks

dawn-theme-font.PNG

BSalim
Excursionist
10 2 5

Sorry for the above instructions I mistook Dawn for Debut. Unfortunately the theme doesn't accommodate the ability to change font sizes via a slider or UI element, this can be added by editing the settings_schema.json and the appropriate css files (most probably base.css) but the theme simply doesn't allow for the user to be able to do it via the customize option.

optostar
Excursionist
13 0 6

I would love to be able to change global font sizes in Dawn like I was able to in Debut. Do you have the code handy to add it as a setting in settings_schema.json @BSalim ?

RC7
Excursionist
18 1 2

Would be interested as well in this. The default font size is way too small in the Dawn theme in my opinion.

I tried adding

.product-single__description ul{
    font-size: 20px !important;
}

 

to the end of base.css but that didn't work 😞

made4Uo
Shopify Partner
3839 716 1177

This is an accepted solution.

Hi @optostar,

You can change the font-size in the base.css. This is at the Asset folder, under the base.css. Find the code .h1, h1 { } or .h2, h2 {} or what ever code you want to edit with a font-size. You can reduce size of the font by reducing the rem.

NOTE: Dawn Theme uses rem, instead of pixels. It means it relies to the root font size, which is in the theme.liquid file, under the Layout folder. The main root of the font sizes came from html, which has a font size in percentage.

Code in the html look like this. 


html {
box-sizing: border-box;
font-size: 62.5%;
height: 100%;
}

The font-size: 62.5% is equal to 10px. Therefore, the 1rem 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
RC7
Excursionist
18 1 2

This is an accepted solution.

Hi @made4Uo 

Do you think it's better to change the rem instead of the overall percentage of the font size and make it higher than 62.5%?

Another thing I notice with dawn is that even with the same size and font family the font appears to be lighter. Do you know where I could change the font weight? 

made4Uo
Shopify Partner
3839 716 1177

Yes. I would recommend changing the rem instead the percentage. The percentage is the root font size. If the root changes all of the elements that relies on to will change too. What I mean is all the element that uses rem will get adjusted. Targeting the specific element would be a best thing to do.

If you go to your layout folder and open the theme.lquid, you will see the code below. I believed currently, Dawn only have one font-weight, and that is bold. Unless you end up downloading your own fonts. To change your font-weight, you just have to target them and add font-weight: bold

{%- liquid
assign body_font_bold = settings.type_body_font | font_modify: 'weight', 'bold'
assign body_font_italic = settings.type_body_font | font_modify: 'style', 'italic'
assign body_font_bold_italic = body_font_bold | font_modify: 'style', 'italic'
%}

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
RC7
Excursionist
18 1 2

Thanks a lot. 

Makes sense about the rem/root font size.

About the font weight, I can actually pick between regular, semi-bold, bold etc directly in the customizer, but what I mean is that Dawn's regular version of Muli (the font I'm using) for example is way thinner than on the Debut theme, so I assumed there must be some kind of code there defining in a number how thin a regular font will be or something like that. 


Are you aware of anything like that?

made4Uo
Shopify Partner
3839 716 1177

@RC7 sorry. I am not aware about that. Do you think it is because most of the elements in Dawn are much bigger than the other theme? Or Debut theme perhaps?

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
RC7
Excursionist
18 1 2

No worries and thanks for trying to help.

No no, it's really just the font itself. It's not an optical illusion based on the other elements.

husainm
Visitor
1 0 0

it worked! amazing thank you 

gracefuldz
Tourist
3 0 1

Hello, 

Hope it's okay to tack on another question. 

How can I increase the body <p> font size in base.liquid?

This is what I see... but no body reference:

 

}

h1,
h2,
h3,
h4,
h5,
.h0,
.h1,
.h2,
.h3,
.h4,
.h5 {
  font-family: var(--font-heading-family);
  font-style: var(--font-heading-style);
  font-weight: var(--font-heading-weight);
  letter-spacing: 0.06rem;
  color: rgb(var(--color-foreground));
  line-height: 1.3;
}
made4Uo
Shopify Partner
3839 716 1177

@gracefuldz HI,

I do not think the <p> uses header sizes. 

Can you see if you have a code below?

p {

font-size: ####

}

 

What theme are you using?

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
gracefuldz
Tourist
3 0 1

Hi @made4Uo,

I can't find that code in the base css file.. Is that where I should be looking?

I'm using Dawn / Craft

 

 

made4Uo
Shopify Partner
3839 716 1177

@gracefuldz 

Forgot to mention. You can always set up a font-size for the <p>

Just go to Asset folder and find the base.css file. Then add the code below. NOTE: you can change the size on whatever you want. It should affect the elements that uses the <p> tag, unless, they already have a defined font-size

p {

font-size: 1rem;

}

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
gracefuldz
Tourist
3 0 1

This worked a charm!!! Thanks so much!

Trinitydiamonds
Tourist
3 0 1

Hello, I have a similar problem when adjusting the font size in Dawn theme. I saw you have a great solution and I hope you can help me with my website. Right now, what I notice about my website font is that the product description is too small, but the rest of the heading and the box is big. Is there a way I can reverse this by making the description bigger and the rest to be smaller? I went to edit code-> base.css and change the font size rem. I put Ho-H3 to smaller rem and H4-H5 bigger rem but It still did not give me the result I am looking for. 

Trinitydiamonds_0-1637374839521.png

 

Zworthkey
Shopify Partner
5581 642 1575

@Trinitydiamonds 
Hi, Welcome to the Shopify Community Sir.
I hope you will get resolve your Issues.

Thanks for giving your Time.
Have a Good Day.

Zworthkey
Shopify Partner
5581 642 1575

@Trinitydiamonds 
kindly Share your Store Url, Sir.
So we can help you.
Thank you.

GIREGGIA
Explorer
75 2 17

Hi @Zworthkey 

 

I would like to reduce the size of the titles in each page but I can't figure which heading code to reduce. I've tried playing around with the %rems of all headings but nothing seems to work.

 

Can you please advise? URL is https://www.suit-of-lights.com/

msdocuments
Excursionist
32 2 5

If I want to change the the text welcome to our store at the top of the page then how to do that?

 

Halim
msdocuments
Excursionist
32 2 5

Hi can I change the font size of  first section of my home page i.e welcome to our store 

and main menu link also?

Halim
uroekwib
Shopify Partner
1 0 0

Very useful! How can we reduce the font-size only for Mobile View?

Ajay-app-dev
Shopify Partner
178 16 14

@pureseeds , kindly share the url, so I can help you to create this functionality.

Try Essentialwolf Upsell & Cross Sell (★★★★★ 5+ star) App

- Was your question answered? Mark it as an Accepted Solution
- Learn more about us at www.essentialwolf.com

chrisdixon161
Visitor
1 0 1

To increase the font size for the products:

From your dashboard go to your Online Store > Themes > Edit Code. In the sidebar you will see a list of files, under the Snippets section, click on the file named product-card.liquid and locate the following code (for me it is line 95):

 

<span class="card-information__text h5">
  {{ product_card_product.title | escape }}
</span>

 

On line 1 here, the key part is the "h5" class. If you are not a coder, h1-h6 are used to create website headings. H1 being the most important (and often the biggest) and h6 being the least important.

With this in mind, Shopify has also used these numbers to create classes to apply a font size. So if you want a larger font size, drop down to a h4 or h3 depending on your needs. Save the file and you are good to go.

RC7
Excursionist
18 1 2

Ok, thanks a lot