How to implement google fonts into shopify hydrogen?

Technical Q&A

Topic summary

Google Fonts fail to load in a Shopify Hydrogen app despite adding preconnect and stylesheet links in app/root.tsx’s links() function with referrerPolicy set to origin. DevTools Network shows the font requests are “blocked.” Code and screenshots are central to understanding the issue.

Root cause and fix suggested: a restrictive Content Security Policy (CSP) is likely blocking external font and stylesheet requests. Update the CSP to include fonts.googleapis.com and fonts.gstatic.com in both styleSrc and fontSrc directives. In Hydrogen, this can be configured via the createContentSecurityPolicy utility (per Shopify docs).

Alternative approach: self-host fonts using the Fontsource library to avoid external fetches and CSP changes, with a referenced example implementation (Pilot Theme). This can also improve performance.

Status: no confirmed resolution from the original poster. Action items:

  • Update CSP to allow Google Fonts domains (styleSrc, fontSrc).
  • Or switch to self-hosted fonts via Fontsource.
Summarized with AI on December 12. AI used: gpt-5.
2

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.