Skip to content

feat(fonts): add HelsinkiGroteskPro variable font#617

Merged
jorilindell merged 1 commit into
mainfrom
LINK-2542-add-missing-font
Jun 12, 2026
Merged

feat(fonts): add HelsinkiGroteskPro variable font#617
jorilindell merged 1 commit into
mainfrom
LINK-2542-add-missing-font

Conversation

@jorilindell

@jorilindell jorilindell commented Jun 12, 2026

Copy link
Copy Markdown
Contributor

Refs: LINK-2542

Summary by CodeRabbit

  • Style
    • Upgraded webfont assets to HelsinkiGroteskPro, supporting multiple weights and styles for improved typography.
    • Migrated to modern woff2 font format for faster loading and better performance across the application.

@jorilindell jorilindell requested a review from a team as a code owner June 12, 2026 09:16
@coderabbitai

coderabbitai Bot commented Jun 12, 2026

Copy link
Copy Markdown

Review Change Stack

📝 Walkthrough

Walkthrough

This 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.

Changes

HelsinkiGroteskPro font migration

Layer / File(s) Summary
New HelsinkiGroteskPro @font-face definitions
src/assets/styles/fonts.scss, public/styles/noscript.css
@font-face rules for HelsinkiGroteskPro (weights 400, 500, 700, 900; normal and italic) using .woff2 sources replace the previous HelsinkiGrotesk definitions in both Sass and noscript CSS.
Font stack variable and declaration reformatting
src/assets/styles/fonts.scss, public/styles/noscript.css
$hel-grotesk Sass variable and html font-family declarations are reformatted to multi-line, quoted fallback lists while preserving font ordering and names.

🎯 2 (Simple) | ⏱️ ~8 minutes

🐰 New fonts hop into place,
Woff2 whispers across the wire,
Multi-line beauty found!

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Description check ⚠️ Warning The pull request description is incomplete, providing only a minimal reference (Refs: LINK-2542) without the required template sections such as Description, Issues, Testing, Screenshots, or Additional notes. Fill out the required template sections with details about the changes, affected issues, testing performed, and any additional context needed for code review.
✅ Passed checks (4 passed)
Check name Status Explanation
Title check ✅ Passed The title clearly and concisely describes the main change: adding the HelsinkiGroteskPro variable font, which aligns with the file modifications updating font definitions and CDN sources.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch LINK-2542-add-missing-font

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.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

Comment thread src/assets/styles/fonts.scss

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

📥 Commits

Reviewing files that changed from the base of the PR and between 6927c09 and f1c2540.

📒 Files selected for processing (2)
  • public/styles/noscript.css
  • src/assets/styles/fonts.scss

Comment thread public/styles/noscript.css
Comment thread public/styles/noscript.css
Comment thread src/assets/styles/fonts.scss
Comment thread src/assets/styles/fonts.scss
Comment thread src/assets/styles/fonts.scss
@azure-pipelines

Copy link
Copy Markdown

LINKEDCOMPONENTS-UI branch is deployed to platta: https://linkedcomponents-ui-pr617.dev.hel.ninja 🚀🚀🚀

@azure-pipelines

Copy link
Copy Markdown

e2e tests result is success for https://linkedcomponents-ui-pr617.dev.hel.ninja 😆🎉🎉🎉

@sonarqubecloud

Copy link
Copy Markdown

@jorilindell jorilindell merged commit 05894e5 into main Jun 12, 2026
31 of 32 checks passed
@jorilindell jorilindell deleted the LINK-2542-add-missing-font branch June 12, 2026 10:45
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants