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

[Mihai-github]

Hello, I’m experiencing an issue with loading a locally stored Montserrat font in a Hydrogen project.

I’m referencing it in CSS as follows:

@font-face {
  font-family: 'Montserrat';
  src: url('/fonts/montserrat/Montserrat-Thin.ttf');
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}

The font file is located at: /public/fonts/montserrat/Montserrat-Thin.ttf
Based on my understanding, referencing it with a root-relative path like /fonts/montserrat/Montserrat-Thin.ttf should work — especially since it’s located in the public/ directory. However, the font is not loading in the deployed version of the site.

Things I’ve tried:
• Referencing it using both relative and absolute paths (public/fonts/..., /public/fonts/...)
• Moving the font to different locations, including inside the app/ directory
• Restarting the dev server and rebuilding the project
• Confirmed that it loads successfully in local development — but not in production after deployment

Despite these attempts, the font still fails to load in the deployed Hydrogen storefront.
Any idea what I might be doing wrong, or is there something specific about Hydrogen’s deployment/Vite build process that affects local asset resolution?

Thanks in advance for any help or insights!