CSP Violation Error when Adding Google Fonts to Shopify Hydrogen 2.0

Technical Q&A

Topic summary

A user encountered a Content Security Policy (CSP) violation error when attempting to add Google Fonts to a Shopify Hydrogen 2.0 theme, despite updating the style-src directive with the Google Fonts URL.

Solution Provided:

  • Modify the createContentSecurityPolicy function in the entry.server.tsx file to include “fonts.googleapis.com”
  • Important caveat: This function does not merge directives by default, requiring all other styleSrc directives to be explicitly defined
  • A reference implementation was shared via GitHub link (Weaverse repository)

Current Status:

  • The original poster confirmed the solution worked for them
  • However, another user reported the fix did not resolve their issue, indicating the problem may persist in some configurations
Summarized with AI on November 13. AI used: claude-sonnet-4-5-20250929.
1

How can I resolve this CSP violation error on Shopify Hydrogen 2.0 and successfully add Google Fonts to my theme? I’ve attempted to update the style-src directive with the Google Fonts URL, but the issue persists. Any insights or guidance on adjusting the CSP settings for the Hydrogen 2.0 theme would be greatly appreciated.

Thanks in advance!

2

Hey @kiran121 , you can update the createContentSecurityPolicy function in entry.server.tsx file to include “fonts.googleapis.com”. However, this function does not merge the directives by default. You have to define all other styleSrc directives like this.

2 Likes
3

Thank you , it works

1 Like
4

its not working for me btw