Webfont is not loading in Oxygen deployment preview because the request URL is relative to https://cdn.shopify.com

[mattrosno]

Here you can see the Hydrogen version, font files in the public directory, and the font face CSS declarations:

The fonts are properly loading on localhost:

However, when deployed to Oxygen, the font face URLs are relative to https://cdn.shopify.com:

If we look at another file in that public directory in that build, the favicon, you can see a URL like this https://cdn.shopify.com/oxygen/83690193194/1000006047/939nk6eh2/build/_assets/favicon-TBCCXLE6.svg:

I can't find Hydrogen v2 tutorials, but this approach is in-line with the v1 tutorial and I don't see any mention of fonts in the migration guides.

Is this a Hydrogen bug where the Oxygen build should use a generated asset base URL for the font face URL paths?

[mattrosno]

This is a total hack, but for now, I replace the relative font face URLs with absolute URLs from one of my Oxygen builds.

  @font-face {
    font-family: 'Dos';
    src: url('https://cdn.shopify.com/oxygen/83690193194/1000006047/xay52w6gn/fonts/CalibreWeb-Regular.woff2')
        format('woff2'),
      url('https://cdn.shopify.com/oxygen/83690193194/1000006047/xay52w6gn/fonts/CalibreWeb-Regular.woff')
        format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
  }

  @font-face {
    font-family: 'Dos';
    src: url('https://cdn.shopify.com/oxygen/83690193194/1000006047/xay52w6gn/fonts/UniversLTStd-Black.woff')
      format('woff');
    font-weight: 850;
    font-style: normal;
    font-display: swap;
  }

[stevepsharpe]

I had the same issue. Add the fonts directory inside of the app directory instead of the public.

Then update your font URLs to be relative, e.g. ../fonts/CalibreWeb-Regular.woff2

[frandiox]

As Steve mentioned, you can place your fonts in the app directory and use a relative path. That's what we are doing in our demo-store: https://github.com/Shopify/hydrogen/blob/main/templates/demo-store/app/styles/custom-font.css#L5

This is something we recently discussed internally. We'll try to improve this somehow.

[stevepsharpe]

I actually like that better. I had the font directory at the root of the app directory. Another benefit of having the fonts inside of app, is the font files get a fingerprint.

[mattrosno]

@frandiox @stevepsharpe thank you!

[jamalsoueidan]

I have the same problem but with images.

background-image: url('/beauty-image.png'); // works localhost, file is located in public/

background-image: url('./images/beauty-image.png'); // doesn't work, even if if i move the image to app/styles/images/beauty-image.ong