Fonts

B_BOHEME
Excursionist
15 0 9

Hello

How do I change fonts - size and type throughout my site please?

Thanks.

Solutions1
Explorer
100 12 23

Hello B_Boheme!

Go to Actions > Edit code and in the editor that loads, open Assets / theme.scss.liquid from the folder pane on the left. Search for this line of code

 

$baseFontSize: {{ settings.type_base_size }};
Replace for following where the size of 20px can be anything you prefer

 

$baseFontSize: 20px;
Save and you're good to go, but font size changes in the customiser will not take effect from now on

Hope this helps

Thanks

Solution1

B_BOHEME
Excursionist
15 0 9

Hello

Thanks for the reply and I am a total novice at Shopify.

So to clarify to change the fonts of my site - overall website font and size, headers etc ...  it is done by code?

If so where do I change each of these?

Best

dmwwebartisan
Shopify Partner
7363 1742 2329

@B_BOHEME 

Please let me know which theme you are using so I will give you the code accordingly.

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
B_BOHEME
Excursionist
15 0 9

Hello 

Thank you and it is the Ella theme.

Best

dmwwebartisan
Shopify Partner
7363 1742 2329

@B_BOHEME 

You can try to add the following code at the bottom of your assets/style.css ( check if you have theme.css or theme.scss.liquid )  file.

/* For body text */
body {
font-family: "Your font name here.." !important;
font-size: 15px !important;
}

/* for heading */
span, p, h1, h2, h3, h4, h5, h6{
font-family: "Your font name here.." !important;
font-size: 15px !important;
}

/* for header menu */
.header .main-menu .menu-item a span{
font-family: "Your font name here.." !important;
font-size: 15px !important;
}

You can use the above code for menu, headings, and body texts. In the above code, you can change font family and font size as per your need.

Hope this works.

Thanks!

 

 

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
B_BOHEME
Excursionist
15 0 9

Thanks so much indeed again and I will give it a try.

Have a fab day!

Best

0 Likes
B_BOHEME
Excursionist
15 0 9

Actually a quick question, I need to download the font files first?

I had googled and it says I need to download "woff" files, is this correct?

Thanks again.

dmwwebartisan
Shopify Partner
7363 1742 2329

@B_BOHEME 

You can download fonts. In zip, you will get TTF file. You can convert that TTF file into a WOFF file. To do so you can use any online convertor which is available. For example, you can search in google "convert ttf to woff" you can get tons of results to choose one of it, upload your TTF file and download woff file they converted.

It is easy and that woff files you can use with fonts in shopify.

https://cloudconvert.com/ttf-to-woff

You can try the above link also. Hope it helps.

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
B_BOHEME
Excursionist
15 0 9

Hi again

I did that and changed the font once and thank you it worked.

But I did not like the font so cut and paste in a new font but it has not changed the second time, would you know why?

Do I need to delete the code in total and cut it in again?

Thanks so much.