fix: resolving problem with font loading

.storybook/preview.js

@@ -5,6 +5,7 @@ import { setupTwig } from './setupTwig';
 import { withDesign } from 'storybook-addon-designs';
 
 // GLOBAL CSS
+import '../src/fonts/fonts.scss';
 import '../src/style.scss';
 
 // If in a Drupal project, it's recommended to import a symlinked version of drupal.js.
@@ -33,7 +34,7 @@ export const parameters = {
         '*',
         'WIP',
       ],
-      includeNames: true
+      includeNames: true,
     },
   },
 };

src/fonts/fonts.scss

@@ -0,0 +1,143 @@
+/* Inter */
+@font-face {
+  font-family: 'Inter';
+  src: url('./inter/Inter-Black.ttf') format('truetype');
+  font-weight: 900;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Inter';
+  src: url('./inter/Inter-Bold.ttf') format('truetype');
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Inter';
+  src: url('./inter/Inter-ExtraBold.ttf') format('truetype');
+  font-weight: 800;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Inter';
+  src: url('./inter/Inter-ExtraLight.ttf') format('truetype');
+  font-weight: 200;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Inter';
+  src: url('./inter/Inter-Light.ttf') format('truetype');
+  font-weight: 300;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Inter';
+  src: url('./inter/Inter-Medium.ttf') format('truetype');
+  font-weight: 500;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Inter';
+  src: url('./inter/Inter-Regular.ttf') format('truetype');
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Inter';
+  src: url('./inter/Inter-SemiBold.ttf') format('truetype');
+  font-weight: 600;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Inter';
+  src: url('./inter/Inter-Thin.ttf') format('truetype');
+  font-weight: 100;
+  font-style: normal;
+  font-display: swap;
+}
+
+/* Sentinel */
+@font-face {
+  font-family: 'Sentinel';
+  src: url('./sentinel/Sentinel-Black.ttf') format('truetype'),
+    url('./sentinel/Sentinel-Black.woff') format('woff'),
+    url('./sentinel/Sentinel-Black.woff2') format('woff2');
+  font-weight: 900;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Sentinel';
+  src: url('./sentinel/Sentinel-Bold.woff') format('truetype'),
+    url('./sentinel/Sentinel-Bold.woff') format('woff'),
+    url('./sentinel/Sentinel-Bold.woff2') format('woff2');
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Sentinel';
+  src: url('./sentinel/Sentinel-Light.woff') format('truetype'),
+    url('./sentinel/Sentinel-Light.woff') format('woff'),
+    url('./sentinel/Sentinel-Light.woff2') format('woff2');
+  font-weight: 300;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Sentinel';
+  src: url('./sentinel/Sentinel-LightItalic.woff') format('truetype'),
+    url('./sentinel/Sentinel-LightItalic.woff') format('woff'),
+    url('./sentinel/Sentinel-LightItalic.woff2') format('woff2');
+  font-weight: 300;
+  font-style: italic;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Sentinel';
+  src: url('./sentinel/Sentinel-Medium.woff') format('truetype'),
+    url('./sentinel/Sentinel-Medium.woff') format('woff'),
+    url('./sentinel/Sentinel-Medium.woff2') format('woff2');
+  font-weight: 500;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Sentinel';
+  src: url('./sentinel/Sentinel-MediumItalic.woff') format('truetype'),
+    url('./sentinel/Sentinel-MediumItalic.woff') format('woff'),
+    url('./sentinel/Sentinel-MediumItalic.woff2') format('woff2');
+  font-weight: 500;
+  font-style: italic;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Sentinel';
+  src: url('./sentinel/Sentinel-Semibold.woff') format('truetype'),
+    url('./sentinel/Sentinel-Semibold.woff') format('woff'),
+    url('./sentinel/Sentinel-Semibold.woff2') format('woff2');
+  font-weight: 600;
+  font-style: italic;
+  font-display: swap;
+}