Use Custom Font in Theme Editor Typography

[kferguson1]

Hello,

I'm trying to use the custom font I've uploaded in the theme editor but it's not showing up in the typography section. I've uploaded my fonts to the Assets folder and I've added code to my custom.css but the font is not showing in the Typography section on the Flow theme editor. I think I have to do this manually...can anyone provide instructions on how to do so? I'd like to be able to change the headings and body font to my custom font. Any help is appreciated!

[KetanKumar · Accepted solution]

@kferguson1 

sorry for that issue also its not possible to show custom font in theme setting its your add individua style 

[KetanKumar · Accepted solution]

@kferguson1 

sorry for that issue also its not possible to show custom font in theme setting its your add individua style 

[kferguson1]

Hi thanks for your reply. So how can I use custom fonts on my website?

[kferguson1]

Can you help me with instructions on how to use my custom font for the header, body, and button text of my fonts?

[kferguson1]

Hi...do you think you could help me change the font for my header and body font to my custom font? I need help as soon as possible please!!!

[KetanKumar · Accepted solution]

@kferguson1 

Yes, please try

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

[gr_trading]

Hi @kferguson1 ,

Please refer the video below how you can add custom fonts in Shopify font settings.