fix: load Google Fonts correctly with strict CSP (#77)

## Summary - Allows `fonts.googleapis.com` in `style-src` and `fonts.gstatic.com` in `font-src` so the browser can load Google Fonts - Adds preconnect hints and the Google Fonts import (Griffy, Kalam, Creepster, Henny Penny) to `index.html` - Sets the body font to Kalam and heading font to Griffy, with utility classes for Creepster and Henny Penny - Disables Angular's `inlineCritical` optimisation, which was causing the stylesheet to be deferred via `onload="this.media='all'"` — an inline event handler blocked by the strict `script-src` CSP, preventing the heading font rules from ever applying to screen media ## Test plan - [ ] Rebuild and reload the app - [ ] Verify headings render in Griffy - [ ] Verify body text renders in Kalam - [ ] Check DevTools Styles tab confirms the `h1-h6` font-family rule is matched ✨ This PR was created with help from Hikari~ 🌸 Reviewed-on: #77 Co-authored-by: Hikari <hikari@nhcarrigan.com> Co-committed-by: Hikari <hikari@nhcarrigan.com>
2026-03-05 10:32:19 -08:00
parent c769c81207
commit 7d8c6bf21c
4 changed files with 32 additions and 3 deletions
@@ -14,11 +14,11 @@ const helmetPlugin: FastifyPluginAsync = async (app) => {
      directives: {
        defaultSrc: ["'self'"],
        // Angular uses inline styles for component encapsulation, so we need to allow them
-        styleSrc: ["'self'", "'unsafe-inline'"],
+        styleSrc: ["'self'", "'unsafe-inline'", "https://fonts.googleapis.com"],
        imgSrc: ["'self'", "data:", "https:"],
        scriptSrc: ["'self'"],
        connectSrc: ["'self'", process.env.FRONTEND_URL ?? "http://localhost:4200"],
-        fontSrc: ["'self'", "data:"],
+        fontSrc: ["'self'", "data:", "https://fonts.gstatic.com"],
        objectSrc: ["'none'"],
        baseUri: ["'self'"],
        formAction: ["'self'"],