Skip to content

Add Inter font used by Figma designs #5535

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

Merged
merged 11 commits into from
Sep 16, 2025
Merged

Add Inter font used by Figma designs #5535

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
fdab74a
Add ABC ROM fonts from Comfy.org
webfiltered Aug 31, 2025
440cb7d
Import ABC ROM fonts CSS in main.ts
webfiltered Aug 31, 2025
0cfd607
Move font import to style.css
webfiltered Sep 13, 2025
b2c4283
Add ABC ROM fonts as CSS variables in @theme
webfiltered Sep 13, 2025
f7cbb0d
Merge branch 'main' into add-fonts
webfiltered Sep 14, 2025
94a100b
Add Inter font .woff2 files
webfiltered Sep 15, 2025
177a284
Replace ABC ROM with Inter font declarations
webfiltered Sep 15, 2025
de411dc
Update CSS variables to use Inter font
webfiltered Sep 15, 2025
3a0c8af
Remove unused ABC ROM font files
webfiltered Sep 15, 2025
718b25e
Autoformat style.css
webfiltered Sep 15, 2025
df801c6
Remove redundant font declarations
webfiltered Sep 16, 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
Binary file added public/fonts/abc-rom/abc-rom-black-italic.woff2
View file
Open in desktop
Binary file not shown.
Binary file added public/fonts/abc-rom/abc-rom-medium.woff2
View file
Open in desktop
Binary file not shown.
Binary file added public/fonts/abc-rom/abc-rom-regular.woff2
View file
Open in desktop
Binary file not shown.
50 changes: 50 additions & 0 deletions src/assets/css/fonts.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
/* ABC ROM Font Family */

@font-face {
font-family: 'ABC ROM Medium';
src: url('/fonts/abc-rom/abc-rom-medium.woff2') format('woff2');
font-weight: 500;
font-style: normal;
font-display: swap;
}

@font-face {
font-family: 'ABC ROM Regular';
src: url('/fonts/abc-rom/abc-rom-regular.woff2') format('woff2');
font-weight: 400;
font-style: normal;
font-display: swap;
}

@font-face {
font-family: 'ABC ROM Black Italic';
src: url('/fonts/abc-rom/abc-rom-black-italic.woff2') format('woff2');
font-weight: 900;
font-style: italic;
font-display: swap;
}

/* Simplified font family names for easier use */
@font-face {
font-family: 'ABC ROM';
src: url('/fonts/abc-rom/abc-rom-regular.woff2') format('woff2');
font-weight: 400;
font-style: normal;
font-display: swap;
}

@font-face {
font-family: 'ABC ROM';
src: url('/fonts/abc-rom/abc-rom-medium.woff2') format('woff2');
font-weight: 500;
font-style: normal;
font-display: swap;
}

@font-face {
font-family: 'ABC ROM';
src: url('/fonts/abc-rom/abc-rom-black-italic.woff2') format('woff2');
font-weight: 900;
font-style: italic;
font-display: swap;
}
7 changes: 7 additions & 0 deletions src/assets/css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
@layer theme, base, primevue, components, utilities;

@import './fonts.css';
@import 'tailwindcss/theme' layer(theme);
@import 'tailwindcss/utilities' layer(utilities);
@import 'tw-animate-css';
Expand Down Expand Up @@ -52,6 +53,12 @@
--text-xxs: 0.625rem;
--text-xxs--line-height: calc(1 / 0.625);

/* Font Families */
--font-abc-rom: "ABC ROM", sans-serif;
--font-abc-rom-regular: "ABC ROM Regular", sans-serif;
--font-abc-rom-medium: "ABC ROM Medium", sans-serif;
--font-abc-rom-black-italic: "ABC ROM Black Italic", sans-serif;

/* Palette Colors */
--color-charcoal-100: #171718;
--color-charcoal-200: #202121;
Expand Down