Skip to content

Commit 05894e5

Browse files
jorilindelljorilindell
committed
feat(fonts): add HelsinkiGroteskPro variable font
Refs: LINK-2542
1 parent 6927c09 commit 05894e5

2 files changed

Lines changed: 184 additions & 6 deletions

File tree

‎public/styles/noscript.css‎

Lines changed: 92 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -75,6 +75,84 @@
7575
text-rendering: optimizeLegibility;
7676
}
7777

78+
/*
79+
* HelsinkiGroteskPro variable font (font file served from CDN).
80+
* Regular (400), Medium (500), Bold (700), Black (900), each normal and italic.
81+
* Font axes (fvar): wght 200–900, ital 0–1.
82+
*/
83+
@font-face {
84+
font-display: swap;
85+
font-family: HelsinkiGroteskPro;
86+
font-style: normal;
87+
font-weight: 400;
88+
src: url('https://makasiini.hel.fi/delivery/917fc4ffc37c44d31b143244042e0078/9a677fe2c4414b1a40990971cd4ac24c.woff2')
89+
format('woff2');
90+
text-rendering: optimizeLegibility;
91+
}
92+
@font-face {
93+
font-display: swap;
94+
font-family: HelsinkiGroteskPro;
95+
font-style: italic;
96+
font-weight: 400;
97+
src: url('https://makasiini.hel.fi/delivery/917fc4ffc37c44d31b143244042e0078/9a677fe2c4414b1a40990971cd4ac24c.woff2')
98+
format('woff2');
99+
text-rendering: optimizeLegibility;
100+
}
101+
@font-face {
102+
font-display: swap;
103+
font-family: HelsinkiGroteskPro;
104+
font-style: normal;
105+
font-weight: 500;
106+
src: url('https://makasiini.hel.fi/delivery/917fc4ffc37c44d31b143244042e0078/9a677fe2c4414b1a40990971cd4ac24c.woff2')
107+
format('woff2');
108+
text-rendering: optimizeLegibility;
109+
}
110+
@font-face {
111+
font-display: swap;
112+
font-family: HelsinkiGroteskPro;
113+
font-style: italic;
114+
font-weight: 500;
115+
src: url('https://makasiini.hel.fi/delivery/917fc4ffc37c44d31b143244042e0078/9a677fe2c4414b1a40990971cd4ac24c.woff2')
116+
format('woff2');
117+
text-rendering: optimizeLegibility;
118+
}
119+
@font-face {
120+
font-display: swap;
121+
font-family: HelsinkiGroteskPro;
122+
font-style: normal;
123+
font-weight: 700;
124+
src: url('https://makasiini.hel.fi/delivery/917fc4ffc37c44d31b143244042e0078/9a677fe2c4414b1a40990971cd4ac24c.woff2')
125+
format('woff2');
126+
text-rendering: optimizeLegibility;
127+
}
128+
@font-face {
129+
font-display: swap;
130+
font-family: HelsinkiGroteskPro;
131+
font-style: italic;
132+
font-weight: 700;
133+
src: url('https://makasiini.hel.fi/delivery/917fc4ffc37c44d31b143244042e0078/9a677fe2c4414b1a40990971cd4ac24c.woff2')
134+
format('woff2');
135+
text-rendering: optimizeLegibility;
136+
}
137+
@font-face {
138+
font-display: swap;
139+
font-family: HelsinkiGroteskPro;
140+
font-style: normal;
141+
font-weight: 900;
142+
src: url('https://makasiini.hel.fi/delivery/917fc4ffc37c44d31b143244042e0078/9a677fe2c4414b1a40990971cd4ac24c.woff2')
143+
format('woff2');
144+
text-rendering: optimizeLegibility;
145+
}
146+
@font-face {
147+
font-display: swap;
148+
font-family: HelsinkiGroteskPro;
149+
font-style: italic;
150+
font-weight: 900;
151+
src: url('https://makasiini.hel.fi/delivery/917fc4ffc37c44d31b143244042e0078/9a677fe2c4414b1a40990971cd4ac24c.woff2')
152+
format('woff2');
153+
text-rendering: optimizeLegibility;
154+
}
155+
78156
html {
79157
--breakpoint-xl: 1248px;
80158
--color-black-5: #f1f1f1;
@@ -103,9 +181,20 @@ html {
103181

104182
height: 100%;
105183
width: 100%;
106-
font-family: 'HelsinkiGrotesk', Arial, -apple-system, BlinkMacSystemFont,
107-
'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans',
108-
'Droid Sans', 'Helvetica Neue', sans-serif;
184+
font-family:
185+
'HelsinkiGrotesk',
186+
Arial,
187+
-apple-system,
188+
BlinkMacSystemFont,
189+
'Segoe UI',
190+
'Roboto',
191+
'Oxygen',
192+
'Ubuntu',
193+
'Cantarell',
194+
'Fira Sans',
195+
'Droid Sans',
196+
'Helvetica Neue',
197+
sans-serif;
109198
}
110199

111200
body {

‎src/assets/styles/fonts.scss‎

Lines changed: 92 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -78,9 +78,98 @@
7878
text-rendering: optimizeLegibility;
7979
}
8080

81-
$hel-grotesk: 'HelsinkiGrotesk', Arial, -apple-system, BlinkMacSystemFont,
82-
'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans',
83-
'Droid Sans', 'Helvetica Neue', sans-serif;
81+
/*
82+
* HelsinkiGroteskPro variable font (font file served from CDN).
83+
* Regular (400), Medium (500), Bold (700), Black (900), each normal and italic.
84+
* Font axes (fvar): wght 200–900, ital 0–1.
85+
*/
86+
@font-face {
87+
font-display: swap;
88+
font-family: HelsinkiGroteskPro;
89+
font-style: normal;
90+
font-weight: 400;
91+
src: url('https://makasiini.hel.fi/delivery/917fc4ffc37c44d31b143244042e0078/9a677fe2c4414b1a40990971cd4ac24c.woff2')
92+
format('woff2');
93+
text-rendering: optimizeLegibility;
94+
}
95+
@font-face {
96+
font-display: swap;
97+
font-family: HelsinkiGroteskPro;
98+
font-style: italic;
99+
font-weight: 400;
100+
src: url('https://makasiini.hel.fi/delivery/917fc4ffc37c44d31b143244042e0078/9a677fe2c4414b1a40990971cd4ac24c.woff2')
101+
format('woff2');
102+
text-rendering: optimizeLegibility;
103+
}
104+
@font-face {
105+
font-display: swap;
106+
font-family: HelsinkiGroteskPro;
107+
font-style: normal;
108+
font-weight: 500;
109+
src: url('https://makasiini.hel.fi/delivery/917fc4ffc37c44d31b143244042e0078/9a677fe2c4414b1a40990971cd4ac24c.woff2')
110+
format('woff2');
111+
text-rendering: optimizeLegibility;
112+
}
113+
@font-face {
114+
font-display: swap;
115+
font-family: HelsinkiGroteskPro;
116+
font-style: italic;
117+
font-weight: 500;
118+
src: url('https://makasiini.hel.fi/delivery/917fc4ffc37c44d31b143244042e0078/9a677fe2c4414b1a40990971cd4ac24c.woff2')
119+
format('woff2');
120+
text-rendering: optimizeLegibility;
121+
}
122+
@font-face {
123+
font-display: swap;
124+
font-family: HelsinkiGroteskPro;
125+
font-style: normal;
126+
font-weight: 700;
127+
src: url('https://makasiini.hel.fi/delivery/917fc4ffc37c44d31b143244042e0078/9a677fe2c4414b1a40990971cd4ac24c.woff2')
128+
format('woff2');
129+
text-rendering: optimizeLegibility;
130+
}
131+
@font-face {
132+
font-display: swap;
133+
font-family: HelsinkiGroteskPro;
134+
font-style: italic;
135+
font-weight: 700;
136+
src: url('https://makasiini.hel.fi/delivery/917fc4ffc37c44d31b143244042e0078/9a677fe2c4414b1a40990971cd4ac24c.woff2')
137+
format('woff2');
138+
text-rendering: optimizeLegibility;
139+
}
140+
@font-face {
141+
font-display: swap;
142+
font-family: HelsinkiGroteskPro;
143+
font-style: normal;
144+
font-weight: 900;
145+
src: url('https://makasiini.hel.fi/delivery/917fc4ffc37c44d31b143244042e0078/9a677fe2c4414b1a40990971cd4ac24c.woff2')
146+
format('woff2');
147+
text-rendering: optimizeLegibility;
148+
}
149+
@font-face {
150+
font-display: swap;
151+
font-family: HelsinkiGroteskPro;
152+
font-style: italic;
153+
font-weight: 900;
154+
src: url('https://makasiini.hel.fi/delivery/917fc4ffc37c44d31b143244042e0078/9a677fe2c4414b1a40990971cd4ac24c.woff2')
155+
format('woff2');
156+
text-rendering: optimizeLegibility;
157+
}
158+
159+
$hel-grotesk:
160+
'HelsinkiGrotesk',
161+
Arial,
162+
-apple-system,
163+
BlinkMacSystemFont,
164+
'Segoe UI',
165+
'Roboto',
166+
'Oxygen',
167+
'Ubuntu',
168+
'Cantarell',
169+
'Fira Sans',
170+
'Droid Sans',
171+
'Helvetica Neue',
172+
sans-serif;
84173

85174
// Helsinki Brand Variables
86175
// Do not use these variables directly.

0 commit comments

Comments
 (0)