fix(storybook): 🐛 font import fix

.storybook/main.ts

@@ -1,5 +1,4 @@
 // const path = require("path");
-import TsconfigPathsPlugin from "tsconfig-paths-webpack-plugin";
 import { StorybookConfig } from '@storybook/nextjs';
 
 const config: StorybookConfig = {
@@ -26,6 +25,7 @@ const config: StorybookConfig = {
     if(fileLoaderRule)
     (fileLoaderRule as any).exclude = /\.svg$/; 
 
+    // svgs
     config.module?.rules?.push({
       test: /\.svg$/,
       issuer: {
@@ -43,9 +43,6 @@ const config: StorybookConfig = {
         }}],
     })
 
-    if (config.resolve)
-    config.resolve.plugins = [new TsconfigPathsPlugin({ extensions: config.resolve.extensions }) as any]
-
     return config
   }
 }

.storybook/preview-head.html

@@ -1,4 +1,4 @@
 <link rel="preconnect" href="https://fonts.googleapis.com">
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-<link rel="preload" href="/fonts/NeueMachina.css" />
-<link href="https://fonts.googleapis.com/css2?family=Inter+Tight&display=swap" rel="stylesheet">
+<link href="https://fonts.googleapis.com/css2?family=Inter+Tight&display=swap" rel="stylesheet">
+<link href="/fonts/neue-machina/NeueMachina.css" rel="stylesheet">

.storybook/preview.tsx

@@ -21,7 +21,21 @@ export const withMuiTheme = (Story) =>  (
         padding-block-end: 0;
         padding-inline-start: 0;
         padding-inline-end: 0;
-      }`}
+      }
+      `}
+      </style> 
+      {/** The next is a hack and should be dropped when @storybook/next 
+       * handles fonts correctly. See https://github.com/storybookjs/storybook/issues/19711
+       */}
+      <style global jsx>{`
+      body {
+        font-family: 'Inter Tight', sans-serif;
+      }
+
+      h3 {
+        font-family: 'NeueMachina', sans-serif !important;
+      }
+      `}
     </style>
     <Story />
   </ThemeProvider>

.vscode/settings.json

@@ -1,5 +1,5 @@
 {
   "conventionalCommits.scopes": [
-    "views"
+    "storybook"
   ]
 }

package.json

@@ -59,7 +59,6 @@
     "prettier": "^2.8.3",
     "semantic-release": "19.0.5",
     "storybook": "^7.0.0-beta.45",
-    "tsconfig-paths-webpack-plugin": "3.5.1",
     "typescript": "^4.9.5"
   }
 }

public/fonts/neue-machina/NeueMachina.css

@@ -1,54 +1,54 @@
 
 @font-face {
-  font-family: Neue Machina;
-  src: url("/fonts/neue-machina/NeueMachina-Ultalight.woff2");
+  font-family: 'NeueMachina';
+  src: url("/fonts/neue-machina/NeueMachina-Ultralight.woff2");
   format: ("woff2");
   font-display: swap;
   font-weight: 200;
 }
 
 @font-face {
-  font-family: Neue Machina;
+  font-family: 'NeueMachina';
   src: url("/fonts/neue-machina/NeueMachina-Light.woff2");
   format: ("woff2");
   font-display: swap;
   font-weight: 300;
 }
 
 @font-face {
-  font-family: Neue Machina;
+  font-family: 'NeueMachina';
   src: url("/fonts/neue-machina/NeueMachina-Regular.woff2");
   format: ("woff2");
   font-display: swap;
   font-weight: 400;
 }
 
 @font-face {
-  font-family: Neue Machina;
+  font-family: 'NeueMachina';
   src: url("/fonts/neue-machina/NeueMachina-Medium.woff2");
   format: ("woff2");
   font-display: swap;
   font-weight: 500;
 }
 
 @font-face {
-  font-family: Neue Machina;
+  font-family: 'NeueMachina';
   src: url("/fonts/neue-machina/NeueMachina-Bold.woff2");
   format: ("woff2");
   font-display: swap;
   font-weight: 700;
 }
 
 @font-face {
-  font-family: Neue Machina;
+  font-family: 'NeueMachina';
   src: url("/fonts/neue-machina/NeueMachina-UltraBold.woff2");
   format: ("woff2");
   font-display: swap;
   font-weight: 800;
 }
 
 @font-face {
-  font-family: Neue Machina;
+  font-family: 'NeueMachina';
   src: url("/fonts/neue-machina/NeueMachina-Black.woff2");
   format: ("woff2");
   font-display: swap;

ui/Text.tsx

@@ -1,5 +1,5 @@
 import { Box, BoxProps } from '@mui/system'
-import { neueMachina } from '@lib'
+import { neueMachina, inter } from '@lib/fonts'
 
 export type TextProps = {
   variant: 'h1' | 'h2' | 'h3' | 'big' | 'bigger' | 'body' | 'smaller'
@@ -29,6 +29,7 @@ export const Text = ({ variant, ...rest }: TextProps) => {
     return (
       <Base
         component="p"
+        className={inter.className}
         fontSize={{ xs: 18, md: 24 }}
         fontFamily="Inter Tight"
         {...rest}
@@ -38,6 +39,7 @@ export const Text = ({ variant, ...rest }: TextProps) => {
     return (
       <Base
         component="p"
+        className={inter.className}
         fontSize={{ xs: 14, md: 18 }}
         fontFamily="Inter Tight"
         {...rest}
@@ -48,6 +50,7 @@ export const Text = ({ variant, ...rest }: TextProps) => {
     return (
       <Base
         component="p"
+        className={inter.className}
         fontSize={{ xs: 12, md: 16 }}
         fontFamily="Inter Tight"
         {...rest}
@@ -57,6 +60,7 @@ export const Text = ({ variant, ...rest }: TextProps) => {
     return (
       <Base
         component="p"
+        className={inter.className}
         fontSize={{ xs: 12, md: 14 }}
         fontFamily="Inter Tight"
         {...rest}

yarn.lock

@@ -11426,15 +11426,6 @@ ts-pnp@^1.1.6:
   resolved "https://registry.yarnpkg.com/ts-pnp/-/ts-pnp-1.2.0.tgz#a500ad084b0798f1c3071af391e65912c86bca92"
   integrity sha512-csd+vJOb/gkzvcCHgTGSChYpy5f1/XKNsmvBGO4JXS+z1v2HobugDz4s1IeFXM3wZB44uczs+eazB5Q/ccdhQw==
 
-[email protected]:
-  version "3.5.1"
-  resolved "https://registry.yarnpkg.com/tsconfig-paths-webpack-plugin/-/tsconfig-paths-webpack-plugin-3.5.1.tgz#e4dbf492a20dca9caab60086ddacb703afc2b726"
-  integrity sha512-n5CMlUUj+N5pjBhBACLq4jdr9cPTitySCjIosoQm0zwK99gmrcTGAfY9CwxRFT9+9OleNWXPRUcxsKP4AYExxQ==
-  dependencies:
-    chalk "^4.1.0"
-    enhanced-resolve "^5.7.0"
-    tsconfig-paths "^3.9.0"
-
 tsconfig-paths-webpack-plugin@^3.5.2:
   version "3.5.2"
   resolved "https://registry.yarnpkg.com/tsconfig-paths-webpack-plugin/-/tsconfig-paths-webpack-plugin-3.5.2.tgz#01aafff59130c04a8c4ebc96a3045c43c376449a"