Custom Font not appearing in Editor

KwameAnd
Shopify Partner
8 0 2

I'm currently using two custom fonts on a site and only one is loading correctly.

I'm at my wits' end.

Both fonts have the same CSS in my css-variables.liquid file and both are set up identically, I've checked the files are loaded and tried multiple approaches

in css-variables.liquid

@font-face {
  font-family: 'Bebas Neue';
  src: url('{{"BebasNeue-Regular.woff2" | asset_url}}') format('woff2'),
       url('{{"BebasNeue-Regular.woff" | asset_url}}') format('woff'),
       url('{{"BebasNeue-Regular.ttf" | asset_url }}') format('truetype');
}
@font-face {
  font-family: 'Jakarta';
  src: url('{{"PlusJakartaText-Regular.woff2" | asset_url}}') format('woff2'),
       url('{{"PlusJakartaText-Regular.woff" | asset_url}}') format('woff'),
       url('{{"PlusJakartaText-Regular.ttf" | asset_url }}') format('truetype');
}

 

I've also tried in theme.css.liquid

        @font-face {
          font-family: "Plus Jakarta Sans";
          src: url("PlusJakartaSans-Regular.woff2") format("woff2"),
            url("PlusJakartaSans-Regular.woff") format("woff");
        }
        @font-face {
          font-family: "Bebas Neue";
          src: url("BebasNeue-Regular.woff2") format("woff2"),
            url("BebasNeue-Regular.woff") format("woff");
        }

 

And had no luck. Only Plus Jakarta Sans will load.

Can anyone offer any help?

Offering branding, strategy, design and development.
www.kwameand.co
Replies 3 (3)

KetanKumar
Shopify Partner
36839 3635 11972

@KwameAnd 

sorry for that issue 

shopify custom font doesn't allow to editor 

please this link shopify allow this font on editor 

https://shopify.dev/themes/architecture/settings/fonts 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
KwameAnd
Shopify Partner
8 0 2

I think you misunderstand:
I've set them as the Heading and Body font.

The Body font (Plus Jakarta Sans) works fine and can be seen both on the live site and while editing.

The Heading font (Bebas Neue) sadly doesn't show in the editor.

This is most strange.

Offering branding, strategy, design and development.
www.kwameand.co
KetanKumar
Shopify Partner
36839 3635 11972

@KwameAnd 

yes i know that but shopify custom font  doesn't allow on editor

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing