How to use Shopify fonts in a Hydrogen storefront?

[epjdev]

Hello community,

Does anyone know how to utilize Shopify's free fonts in a Hydrogen storefront? I am specifically trying to use 'Noticia Text' and am not sure where it goes. My assumption is that I am missing the href for the font in root.jsx, but would love insight.

The docs I've referred to: https://shopify.dev/docs/themes/architecture/settings/fonts#add-shopify-fonts-to-your-theme

// root.jsx
export const links = () => {
  return [
    {rel: 'stylesheet', href: appStyles},
    {rel: 'stylesheet', href: resetStyles},
    {rel: 'stylesheet', href: 'noticia_text_n4'}, // incorrect href here?
    {
      rel: 'preconnect',
      href: 'https://cdn.shopify.com',
    },
    {
      rel: 'preconnect',
      href: 'https://shop.app',
    },
  ];
};

body {
  font-family: Noticia Text;
}

[Liam · Accepted solution]

Hi Epjdev,

The Shopify Font Library is only available on stores that use the Liquid-based storefront, and not Hydrogen or custom storefronts. The Noticia Text font is part of Google Fonts though, so you could implement this font manually into a Hydrogen storefront. 

Hope this helps!

[epjdev]

Thanks for the response!