How to change the default font and font size

Store Design
1

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!

Lynnn_0-1630487172387.png
Lynnn_0-1630487172387.png760×284 32.4 KB

Lynnn_1-1630487262957.png
Lynnn_1-1630487262957.png932×326 38.1 KB

2

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

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

I also want to know how to solve this problem!

4

Thank you so much, sir! it works!

How I can change the all the fonts to Montserrat

5

@lucas05021
Share your Site URL.

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

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

7

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;
}
8

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?

Lynnn_0-1630490002158.png
Lynnn_0-1630490002158.png438×314 42.7 KB

Product name

Lynnn_1-1630490025893.png
Lynnn_1-1630490025893.png712×246 22.2 KB

refund policy

9 
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

10

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

11

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

12

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

13

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

14

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

15

I want to make it smaller like 16 px

16

Add this in theme.scss

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

mobile.JPG
mobile.JPG506×514 35.7 KB

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

18

Hi @pb11nz ,

Share your store URL please ?

19

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.

1 Like
20 
@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.

1 Like