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

@font-face not working for fonts with subfolder – Shopify

I currently have a structure as below: 

stylesheet.css
fonts/webfont-1.woff

When using @font-face in the stylesheet.css,

src: url('fonts/webfont-1.woff');

does not load the font.

When I move the webfont-1.woff over to the same folder as stylesheet.css however, and change the @font-face reference in the stylesheet.css to:

src: url(webfont-1.woff');

The font works completely fine. I am doing this through the Shopify liquid platform so I’m not sure if that affects anything, but help would be greatly appreciated. I’d like the fonts to be in a subfolder for organization, but it doesn’t load when I try to do so.

Thanks.

Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0

    Looks like the limitation comes from Shopify. Sorry about that!


  2. 0

    Did you try with an absolute path with adding a slash ‘/’ in front ‘fonts’ folder name ?
    like this –> src: url('/fonts/webfont-1.woff');

    Login or Signup to reply.
  3. 0

    Just to confirm, you can’t have a fonts folder in Shopify. You will have to store the files in the assets folder.

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

Back To Top
Search