From f1c25404ea3c3a180347fd4e5c604306f36640d4 Mon Sep 17 00:00:00 2001 From: Jori Lindell Date: Fri, 12 Jun 2026 12:15:42 +0300 Subject: [PATCH] feat(fonts): add HelsinkiGroteskPro variable font Refs: LINK-2542 --- public/styles/noscript.css | 95 ++++++++++++++++++++++++++++++++++-- src/assets/styles/fonts.scss | 95 ++++++++++++++++++++++++++++++++++-- 2 files changed, 184 insertions(+), 6 deletions(-) diff --git a/public/styles/noscript.css b/public/styles/noscript.css index 71e2fdbc7..e38b5953a 100644 --- a/public/styles/noscript.css +++ b/public/styles/noscript.css @@ -75,6 +75,84 @@ text-rendering: optimizeLegibility; } +/* + * 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; +} + html { --breakpoint-xl: 1248px; --color-black-5: #f1f1f1; @@ -103,9 +181,20 @@ html { height: 100%; width: 100%; - font-family: 'HelsinkiGrotesk', Arial, -apple-system, BlinkMacSystemFont, - 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', - 'Droid Sans', 'Helvetica Neue', sans-serif; + font-family: + 'HelsinkiGrotesk', + Arial, + -apple-system, + BlinkMacSystemFont, + 'Segoe UI', + 'Roboto', + 'Oxygen', + 'Ubuntu', + 'Cantarell', + 'Fira Sans', + 'Droid Sans', + 'Helvetica Neue', + sans-serif; } body { diff --git a/src/assets/styles/fonts.scss b/src/assets/styles/fonts.scss index 4d4383a62..3894bda18 100644 --- a/src/assets/styles/fonts.scss +++ b/src/assets/styles/fonts.scss @@ -78,9 +78,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; // Helsinki Brand Variables // Do not use these variables directly.