How to change the default font and font size

[Lynnn]

Hi Shopify Community,

I want to change the text of the website to the default font (Montserrat) that I use on the rest of my website.

And how can I smaller the font size of policy and newsletter?

Thanks in advance!

[Zworthkey · Accepted solution]

@lucas05021 
Share your Site URL.

[oscprofessional · Accepted solution]

a {
    font-family: Montserrat, sans-serif;
}

Add this css at the bottom of Online Store->Theme->Edit code->Assets->theme.scss.liquid

[Zworthkey · Accepted solution]

Go to the customization.
click on edit theme setting.
Click typography.
Above that select the font style.

or add this code to theme.scss

*{
font-family:Montserrat;
}

[Zworthkey]

Add this code in theme.scss or theme.css.
on the top.

h2.Footer__Title.Heading.u-h6 {
    font-size: 20px;
}

[Lynnn]

Thank you so much, sir! it works!

How I can change the all the fonts to Montserrat

[Zworthkey · Accepted solution]

Go to the customization.
click on edit theme setting.
Click typography.
Above that select the font style.

or add this code to theme.scss

*{
font-family:Montserrat;
}

[Lynnn]

Hi, the last question

I found some fonts are too big on the website. This seems to come from the same setting. Can I make all these fonts smaller?

Product name

refund policy

[oscprofessional]

h1.ProductMeta__Title.Heading.u-h2 {
    font-size: 20px;
}

Add this css at the bottom of Online Store->Theme->Edit code->Assets->theme.scss.liquid

[Zworthkey]

yes. check out the setting it shows the h1, h2 like

[Lynnn]

How can I edit the font size of h1,h2? Thank you in advance!

[Zworthkey]

Inn which page it's occuring.
Share me link.

[Lynnn]

https://www.benksglobal.com/policies/refund-policy

https://www.benksglobal.com/policies/privacy-policy

https://www.benksglobal.com/collections/iphone-12-screen-protector

The head of all these pages

[Zworthkey]

what size you want?
You want to make it Smaller.

[Lynnn]

I want to make it smaller like 16 px

[Zworthkey · Accepted solution]

Add this in theme.scss

h1,h2,h3{
font-size:16px !important;
}

[lucas05021]

I also want to know how to solve this problem!

[Zworthkey · Accepted solution]

@lucas05021 
Share your Site URL.

[oscprofessional · Accepted solution]

a {
    font-family: Montserrat, sans-serif;
}

Add this css at the bottom of Online Store->Theme->Edit code->Assets->theme.scss.liquid

[Miwanx]

 

Hey there, may you help me? I want to increase the size of numbers and "next" button, is that possible with a code, in waiting favorable for your answer,

Regards

[oscprofessional]

@Miwanx ,

Please Share the URL..

[Miwanx]

Here is the link  https://grunkraut.myshopify.com/collections/damen-hoodies 

[oscprofessional]

@Miwanx ,

Share the password

[Miwanx]

Oh sorry! 

Here is the password : praydo

[Zworthkey]

@Miwanx 

.pagination {
    font-size: 17px !important;
}

Add this code in the theme.scss or style.scss

[oscprofessional]

@Miwanx ,

.pagination__number, a.next {
    font-size: 18px;
}

Add this css at the bottom of Online Store->Theme->Edit code->Assets->style.scss.liquid

[pb11nz]

I want to make the font smaller for the website name for mobile only. photo attached for reference, last letter does not fit. TIA

[oscprofessional]

Hi @pb11nz ,

Share your store URL please ?

[pb11nz]

https://thebudgetify.myshopify.com/

password 1111

The problem is only on android screens, I tried on iPhone and it works fine. I also want to reduce the size and make italic overlay text on image only for mobile screens.

[Zworthkey]

@media only screen and (max-width: 749px){
.site-header__logo {
    padding-left: 21px !important;
    text-align: left;
}
}

@pb11nz 1. Navigate to Online Store->Theme->Edit code
2. Asset->/theme.css or theme.scss->paste below code at the bottom of the file.
3. Save it.

[oscprofessional]

@media only screen and (max-width: 749px){
.site-header__logo {
    padding-left: 20px !important;
    text-align: left;
}
}

@Lynnn,

Add this css at the bottom of
Online Store->Theme->Edit code->Assets->theme.scss.liquid

[tigas31]

@Zworthkey @oscprofessional I have the same question. I want my website to have the same font and sizes as this website: https://www.silkelondon.com/

Can you help me identifying the font used on this website (titles and body) and also the sizes and let me know how do I change it?

My theme is Dawn and I don't have theme.scss.liquid neither theme.scss.

Thank you,