feat(fonts): add HelsinkiGroteskPro variable font#617
Conversation
Refs: LINK-2542
📝 WalkthroughWalkthroughThis PR migrates the project's webfont from HelsinkiGrotesk to HelsinkiGroteskPro, switching to .woff2 format across Sass and noscript CSS fallback files. Font-family declarations are reformatted to multi-line format for consistency. ChangesHelsinkiGroteskPro font migration
🎯 2 (Simple) | ⏱️ ~8 minutes
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
There was a problem hiding this comment.
Actionable comments posted: 5
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@public/styles/noscript.css`:
- Line 185: Remove the unnecessary single quotes around simple font-family names
(e.g., 'HelsinkiGrotesk') in the multi-line font-family declarations so they
become unquoted identifiers (HelsinkiGrotesk); update the occurrences flagged
(including the entries at the referenced lines) to satisfy the Stylelint rule
font-family-name-quotes while keeping any multi-word families or fallbacks that
require quotes unchanged.
- Line 90: The Stylelint keyword-case rule is failing because `@font-face` entries
use the camelCase value "optimizeLegibility" for the text-rendering property;
update each occurrence to the lowercase form "optimizelegibility" (i.e., change
the value for the text-rendering declarations in the `@font-face` blocks) so the
property name text-rendering uses the expected lowercase keyword across all
instances.
In `@src/assets/styles/fonts.scss`:
- Line 93: Update the `@font-face` blocks in src/assets/styles/fonts.scss so the
text-rendering property uses the lowercase keyword required by stylelint;
replace occurrences of "text-rendering: optimizeLegibility;" with
"text-rendering: optimizelegibility" (apply the same change to each `@font-face`
block that currently sets text-rendering, e.g., the instances around the
previously flagged lines).
- Line 161: Normalize the font keyword casing in the font stack by changing the
occurrences of "Arial" and "BlinkMacSystemFont" to lowercase (e.g., "arial" and
"blinkmacsystemfont") in the fonts.scss font-family list so Stylelint's
value-keyword-case rule passes; update the entries where those tokens appear in
the font stack so the rest of the list (quotes/commas) remains unchanged.
- Around line 159-172: The $hel-grotesk Sass variable still begins with
'HelsinkiGrotesk' so the new 'HelsinkiGroteskPro' faces are never chosen; update
the font stacks and the noscript fallback to prefer 'HelsinkiGroteskPro' first
(replace the leading 'HelsinkiGrotesk' with 'HelsinkiGroteskPro' in the
$hel-grotesk variable and the noscript.css font-family rule), ensure any
`@font-face` family names match 'HelsinkiGroteskPro', and verify that references
to the legacy family name (e.g., in $hel-grotesk or the noscript font-family)
are removed or aliased so the Pro family is actually used.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: 36d13c49-5a58-451c-b05f-370f829a980e
📒 Files selected for processing (2)
public/styles/noscript.csssrc/assets/styles/fonts.scss
|
LINKEDCOMPONENTS-UI branch is deployed to platta: https://linkedcomponents-ui-pr617.dev.hel.ninja 🚀🚀🚀 |
e2e tests result is success for https://linkedcomponents-ui-pr617.dev.hel.ninja 😆🎉🎉🎉 |
|



Refs: LINK-2542
Summary by CodeRabbit