How to use Shopify fonts in a Hydrogen storefront?

Solved

How to use Shopify fonts in a Hydrogen storefront?

epjdev
Shopify Partner
3 0 0

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;
}

 

 

Accepted Solution (1)

Liam
Shopify Staff
2873 312 818

This is an 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!

Liam | Developer Advocate @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit Shopify.dev or the Shopify Web Design and Development Blog

View solution in original post

Replies 2 (2)

Liam
Shopify Staff
2873 312 818

This is an 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!

Liam | Developer Advocate @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit Shopify.dev or the Shopify Web Design and Development Blog

epjdev
Shopify Partner
3 0 0

Thanks for the response!