Re: How to change the default font and font size

Solved

How to change the default font and font size

Lynnn
Tourist
12 0 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_1-1630487262957.png

 

 

Accepted Solutions (4)
Zworthkey
Shopify Partner
5581 642 1575

This is an accepted solution.

oscprofessional
Shopify Partner
15957 2387 3095

This is an accepted solution.

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

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

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing | Oscp Upsell & Cross sell App : Free | Oscp Sales & Volume Discount App : Free | Custom Pricing Wholesale App : Free

View solution in original post

Zworthkey
Shopify Partner
5581 642 1575

This is an 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;
}

 

 

View solution in original post

Zworthkey
Shopify Partner
5581 642 1575

This is an accepted solution.

Add this in theme.scss

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

View solution in original post

Replies 28 (28)

Zworthkey
Shopify Partner
5581 642 1575

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

h2.Footer__Title.Heading.u-h6 {
    font-size: 20px;
}
Lynnn
Tourist
12 0 1

Thank you so much, sir! it works!

 

How I can change the all the fonts to Montserrat

Zworthkey
Shopify Partner
5581 642 1575

This is an 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
Tourist
12 0 1

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

Product name

Lynnn_1-1630490025893.png

refund policy

oscprofessional
Shopify Partner
15957 2387 3095
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

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing | Oscp Upsell & Cross sell App : Free | Oscp Sales & Volume Discount App : Free | Custom Pricing Wholesale App : Free
Zworthkey
Shopify Partner
5581 642 1575

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

Lynnn
Tourist
12 0 1

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

Zworthkey
Shopify Partner
5581 642 1575

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

Zworthkey
Shopify Partner
5581 642 1575

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

 

Lynnn
Tourist
12 0 1

I want to make it smaller like 16 px

Zworthkey
Shopify Partner
5581 642 1575

This is an accepted solution.

Add this in theme.scss

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

lucas05021
Excursionist
125 0 5

I also want to know how to solve this problem!

Zworthkey
Shopify Partner
5581 642 1575

This is an accepted solution.

@lucas05021 
Share your Site URL.

oscprofessional
Shopify Partner
15957 2387 3095

This is an accepted solution.

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

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

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing | Oscp Upsell & Cross sell App : Free | Oscp Sales & Volume Discount App : Free | Custom Pricing Wholesale App : Free
Miwanx
Shopify Partner
3 0 2

IMG_20220401_020753.jpg

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
Shopify Partner
15957 2387 3095

@Miwanx ,

Please Share the URL..

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing | Oscp Upsell & Cross sell App : Free | Oscp Sales & Volume Discount App : Free | Custom Pricing Wholesale App : Free
Miwanx
Shopify Partner
3 0 2
oscprofessional
Shopify Partner
15957 2387 3095

@Miwanx ,

Share the password

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing | Oscp Upsell & Cross sell App : Free | Oscp Sales & Volume Discount App : Free | Custom Pricing Wholesale App : Free
Miwanx
Shopify Partner
3 0 2

Oh sorry! 

Here is the password : praydo

Zworthkey
Shopify Partner
5581 642 1575

@Miwanx 

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

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

 

oscprofessional
Shopify Partner
15957 2387 3095

@Miwanx ,

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

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

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing | Oscp Upsell & Cross sell App : Free | Oscp Sales & Volume Discount App : Free | Custom Pricing Wholesale App : Free

pb11nz
Tourist
10 0 5

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

oscprofessional
Shopify Partner
15957 2387 3095

Hi @pb11nz ,

Share your store URL please ?

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing | Oscp Upsell & Cross sell App : Free | Oscp Sales & Volume Discount App : Free | Custom Pricing Wholesale App : Free
pb11nz
Tourist
10 0 5

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
Shopify Partner
5581 642 1575
@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
Shopify Partner
15957 2387 3095

 

 

@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

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing | Oscp Upsell & Cross sell App : Free | Oscp Sales & Volume Discount App : Free | Custom Pricing Wholesale App : Free

tigas31
Excursionist
57 0 9

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