[Tokens]: fixes font token stories display

.storybook/preview.ts

@@ -9,10 +9,7 @@ import '@fontsource/manrope/400.css'
 import '@fontsource/manrope/500.css'
 import '@fontsource/manrope/600.css'
 import '@fontsource/manrope/700.css'
-import '@fontsource/inter/400.css'
-import '@fontsource/inter/500.css'
-import '@fontsource/inter/600.css'
-import '@fontsource/inter/700.css'
+import '@fontsource-variable/inter'
 
 export const parameters = {
   actions: { argTypesRegex: '^on[A-Z].*' },

package.json

@@ -14,7 +14,7 @@
     "@babel/core": "7.20.12",
     "@ctrl/tinycolor": "3.5.1",
     "@floating-ui/dom": "1.4.4",
-    "@fontsource/inter": "5.0.15",
+    "@fontsource-variable/inter": "5.0.15",
     "@fontsource/manrope": "5.0.12",
     "@fontsource/poppins": "5.0.8",
     "@rollup/plugin-node-resolve": "15.0.1",
@@ -26,8 +26,8 @@
     "@storybook/addon-storysource": "7.5.3",
     "@storybook/addon-svelte-csf": "4.0.11",
     "@storybook/preset-scss": "1.0.3",
-    "@storybook/svelte-vite": "7.5.3",
     "@storybook/svelte": "7.5.3",
+    "@storybook/svelte-vite": "7.5.3",
     "@storybook/testing-library": "0.2.2",
     "@tsconfig/svelte": "5.0.2",
     "@types/jest": "29.4.0",
@@ -38,15 +38,15 @@
     "jsdom": "21.1.0",
     "lodash.camelcase": "4.3.0",
     "lodash.merge": "4.6.2",
+    "postcss": "8.4.31",
     "postcss-js": "4.0.1",
     "postcss-sort-media-queries": "4.2.1",
-    "postcss": "8.4.31",
-    "prettier-plugin-svelte": "3.1.0",
     "prettier": "3.1.0",
-    "rollup-plugin-svelte": "7.1.2",
+    "prettier-plugin-svelte": "3.1.0",
     "rollup": "3.15.0",
-    "sass-loader": "13.2.0",
+    "rollup-plugin-svelte": "7.1.2",
     "sass": "1.58.0",
+    "sass-loader": "13.2.0",
     "storybook": "7.5.3",
     "style-dictionary": "3.7.2",
     "style-loader": "3.3.1",