Fonts

[B_BOHEME]

Hello

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

Thanks.

[Solutions1]

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]

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]

@B_BOHEME 

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

[B_BOHEME]

Hello 

Thank you and it is the Ella theme.

Best

[dmwwebartisan]

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

[B_BOHEME]

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

Have a fab day!

Best

[B_BOHEME]

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]

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

[B_BOHEME]

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.

[dmwwebartisan]

@B_BOHEME 

Do you mean that the first time it converts but 2nd time not?

If yes then close the tab or window and open that site again.

Let me know if this works.

[B_BOHEME]

Hi 

I meant the website.

I added a new font woff file in but it does not seem to have updated the second time?

I will try again.

Best

[B_BOHEME]

I like the font on this site https://www.gungholondon.com/collections/dresses

I downloaded the Avenir Next font and uploaded it to my site www.bboheme.com but it does not look the same.

Am I doing something wrong?

[dmwwebartisan]

@B_BOHEME 

please check link for help how to add custom font to shopify theme https://support.weareunderground.com/article/272-how-do-i-add-a-custom-font-to-my-theme

Thanks!

[B_BOHEME]

Hi again

Apologies for the many questions.

I did that and it still does not look the same.

The font I downloaded is AvenirNextLTPro-Regular  is this the correct/same as https://www.gungholondon.com/collections/dresses ??

I am going crazy!

Best

[B_BOHEME]

this is the code, I only put woff and woff 2 in the initial code line.

is this correct?

thanks again.

@font-face {
font-family: "AvenirNextLTPro-Regular";
src: url("AvenirNextLTPro-Regular.woff2") format("woff2"),
url("AvenirNextLTPro-Regular.woff") format("woff");
}
body {
font-family: "AvenirNextLTPro-It.woff" !important;
font-size: 20px !important;
}

span, p, h1, h2, h3, h4, h5, h6{
font-family: "AvenirNextLTPro-It.woff" !important;
font-size: 25px !important;
}

.header .main-menu .menu-item a span{
font-family: "AvenirNextLTPro-It.woff" !important;
font-size: 25px !important;
}

[dmwwebartisan]

wrong 

please upload font to assets directory 

[B_BOHEME]

I uploaded it, you can see below.  It has a "anyconve.com" name in the font, is that correct or ?

[dmwwebartisan]

@B_BOHEME 

This should be the name with font-face URL. You can rename it also as per your convenience.

 

[dmwwebartisan]

@B_BOHEME 

Did you upload that woff files in the assets folder?

Please check the screenshot and make this correction. Please don't put the file name(.woff) in font-family when you use it for the elements.  It must be name of font family that you have given in the font face.