From d281b60ee7e2beace3011500c5e63ea901e56b01 Mon Sep 17 00:00:00 2001
From: trevor-signal <131492920+trevor-signal@users.noreply.github.com>
Date: Mon, 13 Apr 2026 11:40:06 -0400
Subject: [PATCH] Fix fonts in storybook

---
 .storybook/main.ts              |  7 +++++-
 stylesheets/_fontfaces.scss     | 38 ++++++++++++++++++++++-----------
 stylesheets/manifest.scss       |  5 ++++-
 stylesheets/tailwind-config.css |  8 -------
 4 files changed, 36 insertions(+), 22 deletions(-)

diff --git a/.storybook/main.ts b/.storybook/main.ts
index 891acbe09c..891fee5742 100644
--- a/.storybook/main.ts
+++ b/.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;',
+          },
+        },
       ],
     });
 
diff --git a/stylesheets/_fontfaces.scss b/stylesheets/_fontfaces.scss
index 4888179f2a..58da07a90f 100644
--- a/stylesheets/_fontfaces.scss
+++ b/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');
 }
diff --git a/stylesheets/manifest.scss b/stylesheets/manifest.scss
index 953f4987e0..47659378ff 100644
--- a/stylesheets/manifest.scss
+++ b/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';
diff --git a/stylesheets/tailwind-config.css b/stylesheets/tailwind-config.css
index c1ffc8fc01..ad25c8191e 100644
--- a/stylesheets/tailwind-config.css
+++ b/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) {