Fix fonts in storybook

.storybook/main.ts

@@ -70,7 +70,12 @@ const storybookConfig: StorybookConfig = {
       use: [
         { loader: 'style-loader' },
         { loader: 'css-loader', options: { modules: false, url: false } },
-        { loader: 'sass-loader' },
+        {
+          loader: 'sass-loader',
+          options: {
+            additionalData: '$is-storybook: true;',
+          },
+        },
       ],
     });
 

stylesheets/_fontfaces.scss

@@ -1,66 +1,80 @@
 // Copyright 2019 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
+$is-storybook: false !default;
+$protocol: 'asset://';
+@if $is-storybook {
+  $protocol: '..';
+}
+
 @font-face {
   font-family: 'Inter';
-  src: url('asset:///fonts/inter-v3.19/Inter-BoldItalic.woff2');
+  src: url('#{$protocol}/fonts/inter-v3.19/Inter-BoldItalic.woff2');
   font-weight: bolder;
   font-style: italic;
 }
 @font-face {
   font-family: 'Inter';
-  src: url('asset:///fonts/inter-v3.19/Inter-Bold.woff2');
+  src: url('#{$protocol}/fonts/inter-v3.19/Inter-Bold.woff2');
   font-weight: bolder;
 }
 
 @font-face {
   font-family: 'Inter';
-  src: url('asset:///fonts/inter-v3.19/Inter-SemiBoldItalic.woff2');
+  src: url('#{$protocol}/fonts/inter-v3.19/Inter-SemiBoldItalic.woff2');
   font-weight: bold;
   font-style: italic;
 }
 @font-face {
   font-family: 'Inter';
-  src: url('asset:///fonts/inter-v3.19/Inter-Italic.woff2');
+  src: url('#{$protocol}/fonts/inter-v3.19/Inter-Italic.woff2');
   font-style: italic;
 }
 @font-face {
   font-family: 'Inter';
-  src: url('asset:///fonts/inter-v3.19/Inter-SemiBold.woff2');
+  src: url('#{$protocol}/fonts/inter-v3.19/Inter-SemiBold.woff2');
   font-weight: bold;
 }
 @font-face {
   font-family: 'Inter';
-  src: url('asset:///fonts/inter-v3.19/Inter-Medium.woff2');
+  src: url('#{$protocol}/fonts/inter-v3.19/Inter-Medium.woff2');
   font-weight: 500;
 }
 
 @font-face {
   font-family: 'Inter';
-  src: url('asset:///fonts/inter-v3.19/Inter-Regular.woff2');
+  src: url('#{$protocol}/fonts/inter-v3.19/Inter-Regular.woff2');
 }
 
 @font-face {
   font-family: 'Parisienne';
-  src: url('asset:///fonts/stories/Parisienne-Regular.ttf');
+  src: url('#{$protocol}/fonts/stories/Parisienne-Regular.ttf');
 }
 
 @font-face {
   font-family: 'Barlow Condensed';
-  src: url('asset:///fonts/stories/BarlowCondensed-Medium.ttf');
+  src: url('#{$protocol}/fonts/stories/BarlowCondensed-Medium.ttf');
 }
 
 @font-face {
   font-family: 'EB Garamond';
-  src: url('asset:///fonts/stories/EBGaramond-Regular.ttf');
+  src: url('#{$protocol}/fonts/stories/EBGaramond-Regular.ttf');
 }
 
 @font-face {
   font-family: 'Hatsuishi';
-  src: url('asset:///fonts/stories/Hatsuishi-Regular.woff2');
+  src: url('#{$protocol}/fonts/stories/Hatsuishi-Regular.woff2');
 }
 
 @font-face {
   font-family: 'MonoSpecial';
-  src: url('asset:///fonts/mono-special/MonoSpecial-Regular.woff2');
+  src: url('#{$protocol}/fonts/mono-special/MonoSpecial-Regular.woff2');
+}
+
+@font-face {
+  font-family: 'SignalSymbols';
+  font-style: normal;
+  font-weight: 300 400 700;
+  font-display: block;
+  src: url('#{$protocol}/fonts/signal-symbols/SignalSymbolsVariable.woff2');
 }

stylesheets/manifest.scss

@@ -2,7 +2,10 @@
 // SPDX-License-Identifier: AGPL-3.0-only
 
 // Global Settings, Variables, and Mixins
-@use 'fontfaces';
+$is-storybook: false !default;
+@use 'fontfaces' with (
+  $is-storybook: $is-storybook
+);
 @use 'variables';
 @use 'mixins';
 @use 'global';

stylesheets/tailwind-config.css

@@ -242,14 +242,6 @@
   --font-symbols: 'SignalSymbols';
 }
 
-@font-face {
-  font-family: 'SignalSymbols';
-  font-style: normal;
-  font-weight: 300 400 700;
-  font-display: block;
-  src: url('asset:///fonts/signal-symbols/SignalSymbolsVariable.woff2');
-}
-
 @layer base {
   /* Japanese */
   :lang(ja) {