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>

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'"],

apps/frontend/project.json

@@ -25,6 +25,11 @@
       },
       "configurations": {
         "production": {
+          "optimization": {
+            "styles": {
+              "inlineCritical": false
+            }
+          },
           "budgets": [
             {
               "type": "initial",

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||{}};

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;
 }