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

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