One font works, one doesn't

7matt
Visitor
1 0 0

Hello,

 

I am trying to implement the fonts New Kansas and New Hero into our Shopify store by following past threads on here.

 

I have this code in my theme.liquid file:

 

@font-face {
      font-family: "New Hero";
      src: url("{{ 'NewHero-Regular.eot' | asset_url }}");
      src: local("New Hero Regular"),
         local("NewHero-Regular"),
         url("{{ 'NewHero-Regular.eot' | asset_url }}?#iefix") format("embedded-opentype"),
         url("{{ 'NewHero-Regular.woff2' | asset_url }}") format("woff2"),
         url("{{ 'NewHero-Regular.woff' | asset_url }}") format("woff"),
         url("{{ 'NewHero-Regular.ttf' | asset_url }}") format("truetype");
    }
    
    @font-face {
      font-family: "New Kansas";
      src: url("{{ 'NewKansas-Regular.eot' | asset_url }}");
      src: local("New Kansas Regular"),
         local("NewKansas-Regular"),
         url("{{ 'NewKansas-Regular.eot' | asset_url }}?#iefix") format("embedded-opentype"),
         url("{{ 'NewKansas-Regular.woff2' | asset_url }}") format("woff2"),
         url("{{ 'NewKansas-Regular.woff' | asset_url }}") format("woff"),
         url("{{ 'NewKansas-Regular.ttf' | asset_url }}") format("truetype");
    }

 

 Between style tags at the bottom of the head.

 

I then set New Hero as the default font for the whole site and it seems to work on my colleague's laptop as well as mine (they don't have the fonts installed locally whereas I do). 

 

I have New Kansas set as the heading fonts so

 

h1, h2, h3, h4, h5, h6, h1 > *, h2 > *, h3 > *, h4 > *, h5 > *, h6 > *{
      font-family: 'New Kansas', serif;
      font-weight: 300;
}

 

However anywhere where New Kansas should be in use, it is not working and is just defaulting to the browser's default serif font.

 

Anyone know a way to get this working as of course both fonts are set up exactly the same so I am unsure as to why it works for one and not the other. 

 

Thanks in advance for your help,

Matt

Replies 0 (0)