Simple Question: Adding a custom Font

[liferingsplus]

I am trying to add the custom font Monsterrat as all the text in my store. I do not know how to could somebody direct me as how to do so? I appreciate the help very much! liferingsplus.com is my url. The link to the google font is Font 

[KetanKumar · Accepted solution]

@liferingsplus 

Welcome to the Shopify community!
and Thanks for your Good question.

Yes, you can do easy to upload your custom font

1. Go to Online Store->Theme->Edit code
2.Asset->/theme.scss.liquid->upload your custom font all font tyep = TTF, OTF, WOFF, WOFF2, SVG
3. Asset->/theme.scss.liquid->paste below code at the bottom of the file.

@font-face {
font-family: 'Montserrat-Regular';
src: url('{{ 'Montserrat-Regular.eot?' | asset_url }}');
src: url('{{ 'Montserrat-Regular.eot??#iefix' | asset_url }}') format('embedded-opentype'),
url('{{ 'Montserrat-Regular.woff' | asset_url }}') format('woff'),
url('{{ 'Montserrat-Regular.ttf' | asset_url }}') format('truetype'),
url('{{ 'Montserrat-Regular.svg#Montserrat-Regular' | asset_url }}') format('svg');
font-weight: normal;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: antialiased;
}

 can you please just change font name, for example, Montserrat-Regular to your custom font name

[liferingsplus]

Where do I find the TTF, OTF, WOFF, WOFF2, SVG files for the font? How do I upload those into the document? Thank you! Also what do I have to change in the name?

[KetanKumar]

@liferingsplus 

if you don't download please add this google link

https://fonts.google.com/specimen/Montserrat

or maybe your theme allows to choose font please check your theme customization option

[liferingsplus]

Thank you where do I add this link and where do I download to?

[KetanKumar]

@liferingsplus 

are a check on theme customization options on how to change the font?

[liferingsplus]

Yes I checked and there was nothing there, the font has to be added via code. Could I give you access to my store and would you be willing to do it? I have tried so many things and nothing has worked.

[KetanKumar]

@liferingsplus 

It can be done by doing some code customization. please send me a personal message and we can discuss what you'd like

[Lucy97]

Hi there,

I was wondering if you'd be able to help me with a similar issue - I'm trying to add Google Font 'Londrina Solid - Regular 400'  to my website but having looked on various forums and attempting to follow their steps, I am still really struggling to add this font to my site.

Do you think you could help me?

Thanks so much,

Lucy

[KetanKumar]

@Lucy97 

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community!😊
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

[Lucy97]

Hi,

Thank you so much for your help - my website hasn't actually been launched
yet so I'm not sure if you'd be able to see it?

My issue essentially is that I don't know how to do the coding to download
my font (on Google Fonts, but not in the Shopify Font Library) to my
website so that I can use it for the entire site.

Thanks so much for your help 🙂

[KetanKumar]

@Lucy97 

no rush

Shopify font picker doesn't allow to add more font if you need custom font just flow step above my solutions 

[Lucy97]

Thank you! I actually attempted to follow those steps already and it didn't work - do you think you could show me an extremely clear way of doing it (from how to download the font on Google Fonts to the exact position I insert it in on the coding etc.)?

[KetanKumar]

@Lucy97 

can you please add me on staff so i will check and update

[Lucy97]

Yes of course - how do I do that?

[KetanKumar]

@Lucy97 

https://help.shopify.com/en/manual/your-account/staff-accounts/create-staff-accounts

[Lucy97]

Thank you - please could I get your email address?

[liferingsplus]

I have tried doing all this and it still will not work, is there anyway I can give you access and would you be willing to do this?

[Superpose]

SASS has been deprecated. Any idea on how to do this with the latest Debut theme that does not have scss files?

[KetanKumar]

@Superpose 

sorry for this issue maybe this article do you have undertaking why Shopify scss to css convert 

https://www.shopify.in/partners/blog/deprecating-sass