Skip to content

feat(LXStudio): swap LXStudio font to Hanken Grotesk #3190

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 5 commits into
base: main
Choose a base branch
from
Open

feat(LXStudio): swap LXStudio font to Hanken Grotesk #3190

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
b089c5f
feat(LXStudio): swap LXStudio font to Hank Grotesk
dreamwasp Oct 21, 2025
431e0a1
Merge branch 'main' into cass-GMT-1450
dreamwasp Oct 21, 2025
f2b3fe0
formatted
dreamwasp Oct 21, 2025
173625d
Merge branch 'cass-GMT-1450' of github.com:Codecademy/gamut into cass…
dreamwasp Oct 21, 2025
57d1279
remove suisse
dreamwasp Oct 21, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
40 changes: 40 additions & 0 deletions packages/gamut-styles/core/_fonts.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -89,3 +89,43 @@
src: url("../fonts/Suisse/SuisseIntlMono-Bold-WebS.woff2") format("woff2"),
url("../fonts/Suisse/SuisseIntlMono-Bold-WebS.woff") format("woff");
}

@font-face {
font-display: swap;
font-family: "Hanken Grotesk";
font-style: normal;
font-weight: normal;
src: url("../fonts/Hanken_Grotesk/hanken-grotesk-regular.woff2")
format("woff2"),
url("../fonts/Hanken_Grotesk/hanken-grotesk-regular.woff") format("woff");
}

@font-face {
font-display: swap;
font-family: "Hanken Grotesk";
font-style: normal;
font-weight: bold;
src: url("../fonts/Hanken_Grotesk/hanken-grotesk-bold.woff2") format("woff2"),
url("../fonts/Hanken_Grotesk/hanken-grotesk-bold.woff") format("woff");
}

@font-face {
font-display: swap;
font-family: "Hanken Grotesk";
font-style: italic;
font-weight: normal;
src: url("../fonts/Hanken_Grotesk/hanken-grotesk-italic.woff2")
format("woff2"),
url("../fonts/Hanken_Grotesk/hanken-grotesk-italic.woff") format("woff");
}

@font-face {
font-display: swap;
font-family: "Hanken Grotesk";
font-style: italic;
font-weight: bold;
src: url("../fonts/Hanken_Grotesk/hanken-grotesk-bold-italic.woff2")
format("woff2"),
url("../fonts/Hanken_Grotesk/hanken-grotesk-bold-italic.woff")
format("woff");
}
29 changes: 28 additions & 1 deletion packages/gamut-styles/src/remoteAssets/fonts.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -95,4 +95,31 @@ export const percipio: readonly FontConfig[] = [
},
];

export const webFonts = { core, percipio } as const;
export const lxStudio: readonly FontConfig[] = [
{
filePath: `${FONT_ASSET_PATH}/hanken-grotesk-regular`,
extensions,
name: 'Hanken Grotesk',
},
{
filePath: `${FONT_ASSET_PATH}/hanken-grotesk-italic`,
extensions,
name: 'Hanken Grotesk',
style: 'italic',
},
{
filePath: `${FONT_ASSET_PATH}/hanken-grotesk-bold`,
extensions,
name: 'Hanken Grotesk',
weight: 'bold',
},
{
filePath: `${FONT_ASSET_PATH}/hanken-grotesk-bold-italic`,
extensions,
name: 'Hanken Grotesk',
weight: 'bold',
style: 'italic',
},
];

export const webFonts = { core, percipio, lxStudio } as const;
6 changes: 3 additions & 3 deletions packages/gamut-styles/src/themes/lxStudio.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { createTheme } from '@codecademy/variance';

import {
fontBase,
fontLxStudio,
fontMonospace,
fontSystem,
lxStudioPalette,
Expand All @@ -14,8 +14,8 @@ import { coreTheme } from './core';
*/

const lxStudioFontFamily = {
accent: fontBase,
base: fontBase,
accent: fontLxStudio,
base: fontLxStudio,
monospace: fontMonospace,
system: fontSystem,
} as const;
Expand Down
4 changes: 4 additions & 0 deletions packages/gamut-styles/src/variables/typography.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,10 @@ monospace`;
export const fontSystem = `-apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Ubuntu",
"Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif`;

export const fontLxStudio = `"Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI",
"Roboto", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
sans-serif`;

export const fontFamily = {
accent: fontAccent,
base: fontBase,
Expand Down
Loading