feat: add HelsinkiGroteskPro variable font

Refs: LINK-2463

Author: jorilindell

.env.local.example

@@ -27,7 +27,7 @@ NEXT_PUBLIC_SIGNUPS_LOGIN_METHODS=helsinki_tunnus,helsinkiad
 # Content Security Policy (CSP) configuration
 # Full CSP policy string. If not set, no CSP headers will be added.
 # Set `sentry_key` parameter value for report-uri
-#NEXT_CSP_POLICY=connect-src 'self' https://linkedevents.api.dev.hel.ninja https://sentry.test.hel.ninja https://tunnistus.test.hel.ninja; default-src 'none'; font-src https://makasiini.hel.ninja; form-action 'self'; frame-ancestors 'self'; img-src 'self' data:; report-uri https://sentry.test.hel.ninja/api/167/security/?sentry_key=YOUR_KEY&sentry_environment=development; script-src 'self' https://matomo.hel.fi 'unsafe-hashes' 'sha256-7Hm4kDnuwRKq0GkRVBPz6YL9PvbRT9e9rAqI5RnLzBQ='; style-src 'self' 'unsafe-inline'; base-uri 'self'
+#NEXT_CSP_POLICY=connect-src 'self' https://linkedevents.api.dev.hel.ninja https://sentry.test.hel.ninja https://tunnistus.test.hel.ninja; default-src 'none'; font-src https://makasiini.hel.ninja https://makasiini.hel.fi; form-action 'self'; frame-ancestors 'self'; img-src 'self' data:; report-uri https://sentry.test.hel.ninja/api/167/security/?sentry_key=YOUR_KEY&sentry_environment=development; script-src 'self' https://matomo.hel.fi 'unsafe-hashes' 'sha256-7Hm4kDnuwRKq0GkRVBPz6YL9PvbRT9e9rAqI5RnLzBQ='; style-src 'self' 'unsafe-inline'; base-uri 'self'
 
 # Set to 'false' to enforce CSP, otherwise defaults to report-only mode
 #NEXT_CSP_REPORT_ONLY=true

src/styles/fonts.scss

@@ -76,9 +76,98 @@
   text-rendering: optimizeLegibility;
 }
 
-$hel-grotesk: 'HelsinkiGrotesk', Arial, -apple-system, BlinkMacSystemFont,
-  'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans',
-  'Droid Sans', 'Helvetica Neue', sans-serif;
+/*
+ * HelsinkiGroteskPro variable font (font file served from CDN).
+ * Regular (400), Medium (500), Bold (700), Black (900), each normal and italic.
+ * Font axes (fvar): wght 200–900, ital 0–1.
+ */
+@font-face {
+  font-display: swap;
+  font-family: HelsinkiGroteskPro;
+  font-style: normal;
+  font-weight: 400;
+  src: url('https://makasiini.hel.fi/delivery/917fc4ffc37c44d31b143244042e0078/9a677fe2c4414b1a40990971cd4ac24c.woff2')
+    format('woff2');
+  text-rendering: optimizeLegibility;
+}
+@font-face {
+  font-display: swap;
+  font-family: HelsinkiGroteskPro;
+  font-style: italic;
+  font-weight: 400;
+  src: url('https://makasiini.hel.fi/delivery/917fc4ffc37c44d31b143244042e0078/9a677fe2c4414b1a40990971cd4ac24c.woff2')
+    format('woff2');
+  text-rendering: optimizeLegibility;
+}
+@font-face {
+  font-display: swap;
+  font-family: HelsinkiGroteskPro;
+  font-style: normal;
+  font-weight: 500;
+  src: url('https://makasiini.hel.fi/delivery/917fc4ffc37c44d31b143244042e0078/9a677fe2c4414b1a40990971cd4ac24c.woff2')
+    format('woff2');
+  text-rendering: optimizeLegibility;
+}
+@font-face {
+  font-display: swap;
+  font-family: HelsinkiGroteskPro;
+  font-style: italic;
+  font-weight: 500;
+  src: url('https://makasiini.hel.fi/delivery/917fc4ffc37c44d31b143244042e0078/9a677fe2c4414b1a40990971cd4ac24c.woff2')
+    format('woff2');
+  text-rendering: optimizeLegibility;
+}
+@font-face {
+  font-display: swap;
+  font-family: HelsinkiGroteskPro;
+  font-style: normal;
+  font-weight: 700;
+  src: url('https://makasiini.hel.fi/delivery/917fc4ffc37c44d31b143244042e0078/9a677fe2c4414b1a40990971cd4ac24c.woff2')
+    format('woff2');
+  text-rendering: optimizeLegibility;
+}
+@font-face {
+  font-display: swap;
+  font-family: HelsinkiGroteskPro;
+  font-style: italic;
+  font-weight: 700;
+  src: url('https://makasiini.hel.fi/delivery/917fc4ffc37c44d31b143244042e0078/9a677fe2c4414b1a40990971cd4ac24c.woff2')
+    format('woff2');
+  text-rendering: optimizeLegibility;
+}
+@font-face {
+  font-display: swap;
+  font-family: HelsinkiGroteskPro;
+  font-style: normal;
+  font-weight: 900;
+  src: url('https://makasiini.hel.fi/delivery/917fc4ffc37c44d31b143244042e0078/9a677fe2c4414b1a40990971cd4ac24c.woff2')
+    format('woff2');
+  text-rendering: optimizeLegibility;
+}
+@font-face {
+  font-display: swap;
+  font-family: HelsinkiGroteskPro;
+  font-style: italic;
+  font-weight: 900;
+  src: url('https://makasiini.hel.fi/delivery/917fc4ffc37c44d31b143244042e0078/9a677fe2c4414b1a40990971cd4ac24c.woff2')
+    format('woff2');
+  text-rendering: optimizeLegibility;
+}
+
+$hel-grotesk:
+  'HelsinkiGrotesk',
+  Arial,
+  -apple-system,
+  BlinkMacSystemFont,
+  'Segoe UI',
+  'Roboto',
+  'Oxygen',
+  'Ubuntu',
+  'Cantarell',
+  'Fira Sans',
+  'Droid Sans',
+  'Helvetica Neue',
+  sans-serif;
 
 // Application font:
 $font-family-base: $hel-grotesk;