feat(fuselage): Integrate Inter font

.changeset/sweet-mirrors-live.md

@@ -0,0 +1,5 @@
+---
+'@rocket.chat/fuselage': minor
+---
+
+feat(fuselage): Integrate Inter font

packages/fuselage/.storybook/main.ts

@@ -2,7 +2,15 @@ import { dirname, join } from 'path';
 
 import type { StorybookConfig } from '@storybook/react-webpack5';
 
-export default {
+const config: StorybookConfig = {
+  webpackFinal: async (config) => {
+    config.module?.rules?.push({
+      test: /\.woff2$/,
+      type: 'asset/resource',
+    });
+
+    return config;
+  },
   addons: [
     getAbsolutePath('@storybook/addon-a11y'),
     getAbsolutePath('@rocket.chat/storybook-dark-mode'),
@@ -87,7 +95,9 @@ export default {
   typescript: {
     reactDocgen: 'react-docgen-typescript',
   },
-} satisfies StorybookConfig;
+};
+
+export default config;
 
 function getAbsolutePath(value: string): any {
   return dirname(require.resolve(join(value, 'package.json')));

packages/fuselage/src/fonts/inter.scss

@@ -0,0 +1,7 @@
+@font-face {
+  font-family: 'Inter';
+  font-weight: 100 900;
+  font-style: normal;
+  font-display: swap;
+  src: url('./InterVariable.woff2') format('woff2');
+}

packages/fuselage/src/index.scss

@@ -1,3 +1,4 @@
+@import './fonts/inter.scss';
 @import './styles/functions.scss';
 @import './styles/variables/all.scss';
 @import './styles/mixins/all.scss';

packages/fuselage/webpack.config.js

@@ -41,6 +41,13 @@ export default (env, { mode = 'production' }) =>
             },
           },
         },
+        {
+          test: /\.woff2$/,
+          type: 'asset/resource',
+          generator: {
+            filename: 'fonts/[name][ext]',
+          },
+        },
         {
           test: /\.scss$/,
           use: [
@@ -49,7 +56,7 @@ export default (env, { mode = 'production' }) =>
             {
               loader: 'css-loader',
               options: {
-                importLoaders: 2,
+                importLoaders: 3,
               },
             },
             {
@@ -65,7 +72,13 @@ export default (env, { mode = 'production' }) =>
                 },
               },
             },
-            'sass-loader',
+            'resolve-url-loader',
+            {
+              loader: 'sass-loader',
+              options: {
+                sourceMap: true,
+              },
+            },
           ],
         },
       ],