From 8ce319f4b50af2820dcd099e750d2b5665be66ce Mon Sep 17 00:00:00 2001
From: Torsten Dittmann <torsten.dittmann@googlemail.com>
Date: Thu, 27 Nov 2025 14:11:02 +0400
Subject: [PATCH] Add font-family settings and asset fonts

---
 src/routes/+layout.svelte    | 10 ++--
 src/themes/dark-studio.json  |  4 +-
 src/themes/light-studio.json |  4 +-
 static/fonts/studio.css      | 89 ++++++++++++++++++++++++++++++++++++
 4 files changed, 102 insertions(+), 5 deletions(-)
 create mode 100644 static/fonts/studio.css

diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index b39745311..3dc45aa06 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
     import { browser } from '$app/environment';
     import { afterNavigate, goto } from '$app/navigation';
-    import { base } from '$app/paths';
+    import { asset, base } from '$app/paths';
     import { page } from '$app/state';
     import { trackPageView } from '$lib/actions/analytics';
     import { Notifications, Progress } from '$lib/layout';
@@ -181,8 +181,10 @@
         {#each preloadFontsCloud as font}
             <link rel="preload" href={font} as="font" type="font/woff2" crossorigin="anonymous" />
         {/each}
-        <link rel="preload" as="style" type="text/css" href="{base}/fonts/cloud.css" />
-        <link rel="stylesheet" href={`${base}/fonts/cloud.css`} />
+        {#if resolvedProfile.id === ProfileMode.CONSOLE}
+            <link rel="preload" as="style" type="text/css" href="{base}/fonts/cloud.css" />
+            <link rel="stylesheet" href={`${base}/fonts/cloud.css`} />
+        {/if}
     {/if}
 
     <link rel="stylesheet" href={resolvedProfile.css} />
@@ -190,6 +192,8 @@
     {#if resolvedProfile.id === ProfileMode.STUDIO}
         <link rel="preload" as="style" type="text/css" href={CDN_CSS_URL} />
         <link rel="preload" as="script" type="text/javascript" href={CDN_URL} />
+        <link rel="preload" as="style" type="text/css" href={asset('/fonts/studio.css')} />
+        <link rel="stylesheet" href={asset('/fonts/studio.css')} />
     {/if}
 </svelte:head>
 
diff --git a/src/themes/dark-studio.json b/src/themes/dark-studio.json
index ae71bdb51..dfe50d6ce 100644
--- a/src/themes/dark-studio.json
+++ b/src/themes/dark-studio.json
@@ -2,5 +2,7 @@
     "bgcolor-accent": "var(--neutral-50)",
     "bgcolor-accent-secondary": "var(--neutral-100)",
     "bgcolor-accent-tertiary": "var(--neutral-150)",
-    "fgcolor-on-accent": "var(--neutral-950)"
+    "fgcolor-on-accent": "var(--neutral-950)",
+    "font-family-brand": "neue-haas-grotesk-display",
+    "font-family-sansserif": "neue-haas-grotesk-text"
 }
diff --git a/src/themes/light-studio.json b/src/themes/light-studio.json
index d33cc287b..5e951e93f 100644
--- a/src/themes/light-studio.json
+++ b/src/themes/light-studio.json
@@ -1,5 +1,7 @@
 {
     "bgcolor-accent": "var(--neutral-1000)",
     "bgcolor-accent-secondary": "var(--neutral-900)",
-    "bgcolor-accent-tertiary": "var(--neutral-850)"
+    "bgcolor-accent-tertiary": "var(--neutral-850)",
+    "font-family-brand": "neue-haas-grotesk-display",
+    "font-family-sansserif": "neue-haas-grotesk-text"
 }
diff --git a/static/fonts/studio.css b/static/fonts/studio.css
new file mode 100644
index 000000000..bf13ec701
--- /dev/null
+++ b/static/fonts/studio.css
@@ -0,0 +1,89 @@
+@font-face {
+    font-family: 'neue-haas-grotesk-display';
+    src:
+        url('https://use.typekit.net/af/174ae3/00000000000000007735bb5a/31/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n5&v=3')
+            format('woff2'),
+        url('https://use.typekit.net/af/174ae3/00000000000000007735bb5a/31/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n5&v=3')
+            format('woff'),
+        url('https://use.typekit.net/af/174ae3/00000000000000007735bb5a/31/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n5&v=3')
+            format('opentype');
+    font-display: auto;
+    font-style: normal;
+    font-weight: 500;
+    font-stretch: normal;
+}
+
+@font-face {
+    font-family: 'neue-haas-grotesk-display';
+    src:
+        url('https://use.typekit.net/af/c7a282/00000000000000007735bb62/31/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n6&v=3')
+            format('woff2'),
+        url('https://use.typekit.net/af/c7a282/00000000000000007735bb62/31/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n6&v=3')
+            format('woff'),
+        url('https://use.typekit.net/af/c7a282/00000000000000007735bb62/31/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n6&v=3')
+            format('opentype');
+    font-display: auto;
+    font-style: normal;
+    font-weight: 600;
+    font-stretch: normal;
+}
+
+@font-face {
+    font-family: 'neue-haas-grotesk-text';
+    src:
+        url('https://use.typekit.net/af/912d1e/00000000000000007735bb33/31/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3')
+            format('woff2'),
+        url('https://use.typekit.net/af/912d1e/00000000000000007735bb33/31/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3')
+            format('woff'),
+        url('https://use.typekit.net/af/912d1e/00000000000000007735bb33/31/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3')
+            format('opentype');
+    font-display: auto;
+    font-style: normal;
+    font-weight: 400;
+    font-stretch: normal;
+}
+
+@font-face {
+    font-family: 'neue-haas-grotesk-text';
+    src:
+        url('https://use.typekit.net/af/68dda9/00000000000000007735bb35/31/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i4&v=3')
+            format('woff2'),
+        url('https://use.typekit.net/af/68dda9/00000000000000007735bb35/31/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i4&v=3')
+            format('woff'),
+        url('https://use.typekit.net/af/68dda9/00000000000000007735bb35/31/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i4&v=3')
+            format('opentype');
+    font-display: auto;
+    font-style: italic;
+    font-weight: 400;
+    font-stretch: normal;
+}
+
+@font-face {
+    font-family: 'neue-haas-grotesk-text';
+    src:
+        url('https://use.typekit.net/af/c002e2/00000000000000007735bb32/31/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n5&v=3')
+            format('woff2'),
+        url('https://use.typekit.net/af/c002e2/00000000000000007735bb32/31/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n5&v=3')
+            format('woff'),
+        url('https://use.typekit.net/af/c002e2/00000000000000007735bb32/31/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n5&v=3')
+            format('opentype');
+    font-display: auto;
+    font-style: normal;
+    font-weight: 500;
+    font-stretch: normal;
+}
+
+@font-face {
+    font-family: 'neue-haas-grotesk-text';
+    src:
+        url('https://use.typekit.net/af/2288cb/00000000000000007735bb39/31/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3')
+            format('woff2'),
+        url('https://use.typekit.net/af/2288cb/00000000000000007735bb39/31/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3')
+            format('woff'),
+        url('https://use.typekit.net/af/2288cb/00000000000000007735bb39/31/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3')
+            format('opentype');
+    font-display: auto;
+    font-style: normal;
+    font-weight: 700;
+    font-stretch: normal;
+}