From 3b3ac3d1ef59d7e8325fce3fbcfd1b5b0c2d7818 Mon Sep 17 00:00:00 2001
From: Hikari <hikari@nhcarrigan.com>
Date: Thu, 5 Mar 2026 10:26:31 -0800
Subject: [PATCH] fix: load Google Fonts correctly with strict CSP

- Allow fonts.googleapis.com in style-src and fonts.gstatic.com in font-src
- Add Google Fonts preconnect links and import (Griffy, Kalam, Creepster, Henny Penny)
- Set body font to Kalam and heading font to Griffy
- Disable Angular inlineCritical optimisation to prevent deferred CSS loading via onload attribute, which was blocked by the strict script-src CSP
---
 api/src/app/plugins/helmet.ts |  4 ++--
 apps/frontend/project.json    |  5 +++++
 apps/frontend/src/index.html  |  3 +++
 apps/frontend/src/styles.scss | 23 ++++++++++++++++++++++-
 4 files changed, 32 insertions(+), 3 deletions(-)

diff --git a/api/src/app/plugins/helmet.ts b/api/src/app/plugins/helmet.ts
index 1d2db76..25f2612 100644
--- a/api/src/app/plugins/helmet.ts
+++ b/api/src/app/plugins/helmet.ts
@@ -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'"],
diff --git a/apps/frontend/project.json b/apps/frontend/project.json
index ea4900a..122d121 100644
--- a/apps/frontend/project.json
+++ b/apps/frontend/project.json
@@ -25,6 +25,11 @@
       },
       "configurations": {
         "production": {
+          "optimization": {
+            "styles": {
+              "inlineCritical": false
+            }
+          },
           "budgets": [
             {
               "type": "initial",
diff --git a/apps/frontend/src/index.html b/apps/frontend/src/index.html
index 46aa935..22660c5 100644
--- a/apps/frontend/src/index.html
+++ b/apps/frontend/src/index.html
@@ -8,6 +8,9 @@
     <meta name="description" content="Naomi's curated collection of games, books, music, shows, manga, and art. Browse, engage, and suggest new additions!" />
     <meta name="theme-color" content="#9d4edd" />
     <link rel="icon" type="image/x-icon" href="favicon.ico" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link href="https://fonts.googleapis.com/css2?family=Creepster&family=Griffy&family=Henny+Penny&family=Kalam:wght@300;400;700&display=swap" rel="stylesheet" />
     <script defer src="https://analytics.nhcarrigan.com/js/pa-YUXAn1vhhRttySUAw_LMN.js"></script>
     <script>
       window.plausible=window.plausible||function(){(plausible.q=plausible.q||[]).push(arguments)},plausible.init=plausible.init||function(i){plausible.o=i||{}};
diff --git a/apps/frontend/src/styles.scss b/apps/frontend/src/styles.scss
index 074f3db..efe5f67 100644
--- a/apps/frontend/src/styles.scss
+++ b/apps/frontend/src/styles.scss
@@ -38,7 +38,7 @@
 body {
   margin: 0;
   padding: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+  font-family: 'Kalam', cursive;
   font-size: 14pt;
   line-height: 1.6;
   color: var(--foreground);
@@ -75,10 +75,30 @@ body::after {
   pointer-events: none;
 }
 
+@keyframes wiggle {
+  0%, 100% { transform: rotate(-2deg); }
+  50% { transform: rotate(2deg); }
+}
+
 h1, h2, h3, h4, h5, h6 {
   margin-top: 0;
   line-height: 1.2;
   color: var(--witch-purple);
+  font-family: 'Griffy', cursive;
+}
+
+h1 {
+  animation: wiggle 4s ease-in-out infinite;
+  display: inline-block;
+}
+
+.witchy-accent,
+.spooky-title {
+  font-family: 'Creepster', cursive;
+}
+
+.mystical-text {
+  font-family: 'Henny Penny', cursive;
 }
 
 a {
@@ -121,6 +141,7 @@ select:focus {
 
 // Button base styles
 button {
+  font-family: inherit;
   transition: all 0.3s;
 }