Shopify Question posted in
The Shopify help center can be found here.

Adding Custom Font to Shopify Issue

For some reason the custom font that I am trying to implement on my Shopify site is not working at all. I uploaded the font as an asset and used the code in our theme.scss file:

         @font-face {
           font-family:'Neue-Haas-Grotesk', sans-serif;
           src: url(Linotype-NHaasGroteskDSStd-65Md.ttf);
           font-weight: 900;
           font-style: normal;}

I then added codes such as the one below to have it be displayed on certain parts of the site:

   .site-nav { font-family: "Neue-Haas-Grotesk" !important; }

I tried this exact template of code with an Arial Black ttf file that I uploaded as an asset but for some reason this font is not working what so ever. Any suggestions on how to make this work properly on Shopify now and in the future for any site?

Tags:

3

Answers


  1. 0

    I think you just need to make sure that you have a correct URL for your @font-face declaration. Asset files will be served from Shopify’s CDN (Content Delivery Network), so you will want to use the asset_url filter to get the correct address.

    This should hopefully do the trick:

    @font-face {
   font-family:'Neue-Haas-Grotesk', sans-serif;
   src: url({{ 'Linotype-NHaasGroteskDSStd-65Md.ttf' | asset_url }});
   font-weight: 900;
   font-style: normal;
}
    Login or Signup to reply.
  2. 0

    I’m also little new to Shopify, loooking an answer to uploading a custom font that I’ve bought for my site. Now, as far i understood so far they need to be uploaded to shopify cdn and then needs to be imported in the css.

    Can someone please guide, where exactly to upload the file (I’ve .otf file only, sufficient?), post which i can follow the answer above in this thread.

    Login or Signup to reply.
  3. 0
    1. Convert your font file to .woff or .woff2 using any online converter.
    2. Add this code snippet to {% style %} tag in theme.liquid file.
    @font-face {
  font-family: "fontName";
  src: url({{ "fontName.woff2" | asset_url }}) format("woff2"),
       url({{ "fontName.woff" | asset_url }}) format("woff");
  }
    1. Add font-family property to your CSS code.
    .class {
  font-family: fontName;
   }

    Note: If font name is more than one words, use quotations. "font name"

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search