refactor: Update how fonts are loaded (no-changelog) (#20305)

packages/frontend/@n8n/design-system/.storybook/fonts.scss

@@ -1,4 +1,5 @@
 @use '../src/css/_tokens.scss';
+@use '../src/css/common/var';
 
 /* Storybook-specific font paths */
 @font-face {
@@ -6,7 +7,7 @@
 	font-style: normal;
 	font-weight: 100 900;
 	font-display: swap;
-	src: url('../src/css/fonts/InterVariable.woff2') format('woff2');
+	src: url('#{var.$font-path}/InterVariable.woff2') format('woff2');
 }
 
 @font-face {
@@ -14,7 +15,7 @@
 	font-style: italic;
 	font-weight: 100 900;
 	font-display: swap;
-	src: url('../src/css/fonts/InterVariable-Italic.woff2') format('woff2');
+	src: url('#{var.$font-path}/InterVariable-Italic.woff2') format('woff2');
 }
 
 @font-face {
@@ -22,5 +23,5 @@
 	font-style: italic;
 	font-weight: 100 900;
 	font-display: swap;
-	src: url('../src/css/fonts/CommitMonoVariable.woff2') format('woff2');
+	src: url('#{var.$font-path}/CommitMonoVariable.woff2') format('woff2');
 }

packages/frontend/@n8n/design-system/.storybook/main.ts

@@ -1,4 +1,4 @@
 import { sharedConfig } from '@n8n/storybook/main';
 
-const config = { ...sharedConfig, staticDirs: ['../public'] };
+const config = { ...sharedConfig, staticDirs: ['../assets'] };
 export default config;

packages/frontend/@n8n/design-system/src/css/common/var.scss

@@ -81,7 +81,7 @@ $fill-base: $color-white;
 
 /* Typography
 -------------------------- */
-$font-path: 'fonts' !default;
+$font-path: '../../assets/fonts' !default;
 $font-display: 'auto';
 /// fontSize|1|Font Size|0
 $font-size-extra-large: var(--font-size-xl);

packages/frontend/@n8n/design-system/src/css/fonts.scss

@@ -1,21 +1,25 @@
+@use './common/var';
+
 @font-face {
 	font-family: InterVariable;
 	font-style: normal;
 	font-weight: 100 900;
 	font-display: swap;
-	src: url('./InterVariable.woff2') format('woff2');
+	src: url('#{var.$font-path}/InterVariable.woff2') format('woff2');
 }
+
 @font-face {
 	font-family: InterVariable;
 	font-style: italic;
 	font-weight: 100 900;
 	font-display: swap;
-	src: url('./InterVariable-Italic.woff2') format('woff2');
+	src: url('#{var.$font-path}/InterVariable-Italic.woff2') format('woff2');
 }
+
 @font-face {
 	font-family: CommitMono;
 	font-style: italic;
 	font-weight: 100 900;
 	font-display: swap;
-	src: url('./CommitMonoVariable.woff2') format('woff2');
+	src: url('#{var.$font-path}/CommitMonoVariable.woff2') format('woff2');
 }

packages/frontend/@n8n/design-system/src/css/index.scss

@@ -3,7 +3,7 @@
 @use './tokens.dark.scss' as dark;
 @use './reset.scss';
 @use './base.scss';
-@use './fonts/fonts.scss';
+@use './fonts.scss';
 @use './pagination.scss';
 @use './dialog.scss';
 @use './dropdown.scss';