How do I add a custom font family called Bebas neue?

Store Design
1

Hi,

We purchased Booster theme to migrate our Shopify store to OS 2.0. We need to be able to use Bebas Neue font through the site, but this font is not by default available with Booster theme.

How can I add this font into Booster theme? Please share some documentation on achieving this?

Regards,

Pramod

1 Like
2

@pramodraam

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

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

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

3

HI Ketan, Thanks, please note I’m working on a theme that is not yet published. I’m sharing the link for you to preview it and suggest the solution.

https://packed-with-purpose.myshopify.com/?preview_theme_id=122332414012

1 Like
4

@pramodraam

thanks for url can you please flow below step

  1. Go to Online Store->Theme->Edit code
    2.Asset -----> upload your custom font all font tyep = TTF, OTF, WOFF, WOFF2, SVG
  2. Asset->/your css ->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