How to implement google fonts into shopify hydrogen?

[princessfiona]

//app/root.tsx
export function links() {
  return [
    {
      rel: 'preconnect',
      href: 'http://fonts.googleapis.com',
      referrerPolicy: 'origin',
    },
    {
      rel: 'preconnect',
      href: 'http://fonts.gstatic.com',
      crossOrigin: 'anonymous',
      referrerPolicy: 'origin',
    },
    {
      rel: 'stylesheet',
      href: 'http://fonts.googleapis.com/css2?family=Quicksand:wght@300..700&display=swap',
      crossOrigin: 'anonymous',
      referrerPolicy: 'origin',
    },
    {rel: 'stylesheet', href: tailwindCss},
    {rel: 'stylesheet', href: resetStyles},
    {rel: 'stylesheet', href: appStyles},
    {
      rel: 'preconnect',
      href: 'https://cdn.shopify.com',
    },
    {
      rel: 'preconnect',
      href: 'https://shop.app',
    },
    {rel: 'icon', type: 'image/svg+xml', href: favicon},
  ];
}

On the Network tap, it said the status is blocked

I am trying to fetch google fonts, where I add the google fonts links to function links() and set the Referral Policy to origin, but I am still having trouble fetching the google fonts.

[Weaverse · Accepted solution]

Hi @princessfiona,

To implement Google Fonts in Shopify Hydrogen, ensure your Content Security Policy (CSP) includes fonts.googleapis.com and fonts.gstatic.com in fontSrc and styleSrc directives. This resolves blocked requests caused by restrictive CSP settings. You can update your CSP using the createContentSecurityPolicy utility. Check Shopify’s documentation for details: CSP Guide.

Alternatively, for better performance and to avoid CSP updates, consider using the Fontsource library to self-host fonts. It eliminates the need to fetch fonts externally and improves load times. See an example in the Pilot Theme.