Add custom font to font library

[ahoj-brause]

How can i add a custom font, loaded via typography.com CDN in head of theme.liquid, to Shopify's font library so that i can pick this font via font-picker in my theme?

As i understand this article, i have to add the custom font to the font library first:

https://shopify.dev/tutorials/develop-theme-fonts

Not sure how this works, and i don't understand this part "Personal access to the font files isn't currently available."

Does this mean i can not add any additional custom fonts to the font library so that font-picker can use it?

https://shopify.dev/docs/themes/settings#font-picker

PS: i don't want to download the file and i don't want to use !important statements to overwrite CSS, i just want to pick the custom font like all already existing fonts via the font-picker

[Ninthony]

As far as I know, you can't do this, though I would welcome the information. Your best option is going to be loading the file from the CDN in the head of your theme, and then applying the font-family to the places you want through CSS. This is the only way I know of adding custom fonts to Shopify.

[ahoj-brause]

Hey @Ninthony and @KetanKumar,

thanks for the information. I was aware of this approach but this is not what i'm looking for.

I would like to use custom fonts with the font-picker without 'hacking' it into the CSS file.

[KetanKumar]

@ahoj-brause 

Shopify allows this for font picker 

https://shopify.dev/tutorials/develop-theme-fonts#browse-available-fonts

[ahoj-brause]

Hey @KetanKumar,

thanks for the link. I'm aware of this article but can not find any information about where to actually put those custom fonts and how to add those fonts to the Shopify's font library so that font-picker can actually use them.

[pioneer100]

@ahoj-brause  ,
- Shopify does not provide the facility to add custom fonts and use them from Font-selector option.
- You need to add font in asset manually as @KetanKumar  has mentioned in above post.

[ahoj-brause]

Thanks @pioneer100.

Included custom fonts as mentioned before. I was hoping to bypass this path because now the template editor UI has no more control over the fonts because i'm forcing custom fonts via CSS.

Shopify i think adding custom fonts to the font library to use them "as usual" would be a useful feature for your product.

[KetanKumar]

@ahoj-brause 

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

Shopify font library not allow to custom add 

but you can do int custom font on your store 

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

[KetanKumar]

@ursula16 

what's issue

[MRamzan]

You can try this solution. I have solved it and the font shows in the settings.