Why does my custom font not display correctly in Shopify preview?

Tonje
Visitor
1 0 0

Hi,

My custom font won't show the right font in the preview when I send the web link to my client. It is the correct font on my own computer and the wrong font on any other computer. 

Please see below for the code: (assets/theme.css):

 

 

  @font-face {
  font-family: "FKGrotesk-Regular.otf";
      src: url('{{ "FKGrotesk-Regular.woff" | asset_url }}') format("woff"),
        url('{{ "FKGrotesk-Regular.woff2" | asset_url }}') format("woff2"),
        url('{{ "FKGrotesk-Regular.ttf" | asset_url }}') format("truetype"),
}
  
  h1, h1 a, h2, h2 a, h3, h3 a, h4, h4 a, h5, h5 a, h6, h6 a, p, li, #nav li a, div.title a, .headline, .subtitle { font-family: "FKGrotesk-Bold" !important; }
  
  ul, ul a { font-family: "FKGrotesk-Regular" !important; }

 

 

 

View of the correct font.

Tonje_0-1607429870929.png

The wrong font in preview: 

Skjermbilde 2020-12-08 kl. 13.20.32.png

Please let me know if you can help!

Replies 3 (3)

KetanKumar
Shopify Partner
36839 3635 11972

@Tonje 

Thanks for post and goof try your code but something is missing. can you please flow below code

Yes, you can do easy to upload your custom font

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

also make sure all font file upload

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
mbach
Visitor
1 0 1

Thank you so much, this worked for me too once I added code at the end to apply the font to headings etc

KetanKumar
Shopify Partner
36839 3635 11972

@mbach 

it's my pleasure to help us

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