diff --git a/src/app.html b/src/app.html
index 6339817a5..293443c06 100644
--- a/src/app.html
+++ b/src/app.html
@@ -40,6 +40,90 @@
             as="font"
             type="font/woff2"
             crossorigin />
+        <link
+            rel="preload"
+            href="https://fonts-five.vercel.app/aeonik-pro/AeonikPro-Air.woff2"
+            as="font"
+            type="font/woff2"
+            crossorigin />
+        <link
+            rel="preload"
+            href="https://fonts-five.vercel.app/aeonik-pro/AeonikPro-AirItalic.woff2"
+            as="font"
+            type="font/woff2"
+            crossorigin />
+        <link
+            rel="preload"
+            href="https://fonts-five.vercel.app/aeonik-pro/AeonikPro-Thin.woff2"
+            as="font"
+            type="font/woff2"
+            crossorigin />
+        <link
+            rel="preload"
+            href="https://fonts-five.vercel.app/aeonik-pro/AeonikPro-ThinItalic.woff2"
+            as="font"
+            type="font/woff2"
+            crossorigin />
+        <link
+            rel="preload"
+            href="https://fonts-five.vercel.app/aeonik-pro/AeonikPro-Light.woff2"
+            as="font"
+            type="font/woff2"
+            crossorigin />
+        <link
+            rel="preload"
+            href="https://fonts-five.vercel.app/aeonik-pro/AeonikPro-LightItalic.woff2"
+            as="font"
+            type="font/woff2"
+            crossorigin />
+        <link
+            rel="preload"
+            href="https://fonts-five.vercel.app/aeonik-pro/AeonikPro-Regular.woff2"
+            as="font"
+            type="font/woff2"
+            crossorigin />
+        <link
+            rel="preload"
+            href="https://fonts-five.vercel.app/aeonik-pro/AeonikPro-RegularItalic.woff2"
+            as="font"
+            type="font/woff2"
+            crossorigin />
+        <link
+            rel="preload"
+            href="https://fonts-five.vercel.app/aeonik-pro/AeonikPro-Medium.woff2"
+            as="font"
+            type="font/woff2"
+            crossorigin />
+        <link
+            rel="preload"
+            href="https://fonts-five.vercel.app/aeonik-pro/AeonikPro-MediumItalic.woff2"
+            as="font"
+            type="font/woff2"
+            crossorigin />
+        <link
+            rel="preload"
+            href="https://fonts-five.vercel.app/aeonik-pro/AeonikPro-Bold.woff2"
+            as="font"
+            type="font/woff2"
+            crossorigin />
+        <link
+            rel="preload"
+            href="https://fonts-five.vercel.app/aeonik-pro/AeonikPro-BoldItalic.woff2"
+            as="font"
+            type="font/woff2"
+            crossorigin />
+        <link
+            rel="preload"
+            href="https://fonts-five.vercel.app/aeonik-pro/AeonikPro-Black.woff2"
+            as="font"
+            type="font/woff2"
+            crossorigin />
+        <link
+            rel="preload"
+            href="https://fonts-five.vercel.app/aeonik-pro/AeonikPro-BlackItalic.woff2"
+            as="font"
+            type="font/woff2"
+            crossorigin />
         <link rel="preload" as="style" type="text/css" href="/fonts/main.css" />
         <link rel="stylesheet" href="/fonts/main.css" />
         <meta name="viewport" content="width=device-width, initial-scale=1" />
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 36f7df283..825667421 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -106,17 +106,18 @@
 
     $: {
         if (browser) {
+            const isCloudClass = isCloud ? 'is-cloud' : '';
             if ($app.theme === 'auto') {
                 const darkThemeMq = window.matchMedia('(prefers-color-scheme: dark)');
                 if (darkThemeMq.matches) {
-                    document.body.setAttribute('class', `theme-dark`);
+                    document.body.setAttribute('class', `theme-dark ${isCloudClass}`);
                     $app.themeInUse = 'dark';
                 } else {
-                    document.body.setAttribute('class', `theme-light`);
+                    document.body.setAttribute('class', `theme-light ${isCloudClass}`);
                     $app.themeInUse = 'light';
                 }
             } else {
-                document.body.setAttribute('class', `theme-${$app.theme}`);
+                document.body.setAttribute('class', `theme-${$app.theme} ${isCloudClass}`);
                 $app.themeInUse = $app.theme;
             }
         }
@@ -256,4 +257,8 @@
         // --color-neutral-90:  240  7%  12%;   /* #1D1D21 */
         // --color-neutral-100: 240  6%  10%;   /* #19191C */
     }
+
+    .is-cloud {
+        --heading-font: 'Aeonik Pro', arial, sans-serif;
+    }
 </style>
diff --git a/static/fonts/main.css b/static/fonts/main.css
index af99c1f9d..240a4f285 100644
--- a/static/fonts/main.css
+++ b/static/fonts/main.css
@@ -45,3 +45,117 @@
     font-display: swap;
     src: url('poppins/poppins-v19-latin-700.woff2') format('woff2');
 }
+
+@font-face {
+    font-family: 'Aeonik Pro';
+    font-style: normal;
+    font-weight: 100;
+    font-display: swap;
+    src: url('https://fonts-five.vercel.app/aeonik-pro/AeonikPro-Air.woff2') format('woff2');
+}
+
+@font-face {
+    font-family: 'Aeonik Pro';
+    font-style: italic;
+    font-weight: 100;
+    font-display: swap;
+    src: url('https://fonts-five.vercel.app/aeonik-pro/AeonikPro-AirItalic.woff2') format('woff2');
+}
+
+@font-face {
+    font-family: 'Aeonik Pro';
+    font-style: normal;
+    font-weight: 200;
+    font-display: swap;
+    src: url('https://fonts-five.vercel.app/aeonik-pro/AeonikPro-Thin.woff2') format('woff2');
+}
+
+@font-face {
+    font-family: 'Aeonik Pro';
+    font-style: italic;
+    font-weight: 200;
+    font-display: swap;
+    src: url('https://fonts-five.vercel.app/aeonik-pro/AeonikPro-ThinItalic.woff2') format('woff2');
+}
+
+@font-face {
+    font-family: 'Aeonik Pro';
+    font-style: normal;
+    font-weight: 300;
+    font-display: swap;
+    src: url('https://fonts-five.vercel.app/aeonik-pro/AeonikPro-Light.woff2') format('woff2');
+}
+
+@font-face {
+    font-family: 'Aeonik Pro';
+    font-style: italic;
+    font-weight: 300;
+    font-display: swap;
+    src: url('https://fonts-five.vercel.app/aeonik-pro/AeonikPro-LightItalic.woff2') format('woff2');
+}
+
+@font-face {
+    font-family: 'Aeonik Pro';
+    font-style: normal;
+    font-weight: 400;
+    font-display: swap;
+    src: url('https://fonts-five.vercel.app/aeonik-pro/AeonikPro-Regular.woff2') format('woff2');
+}
+
+@font-face {
+    font-family: 'Aeonik Pro';
+    font-style: italic;
+    font-weight: 400;
+    font-display: swap;
+    src: url('https://fonts-five.vercel.app/aeonik-pro/AeonikPro-RegularItalic.woff2')
+        format('woff2');
+}
+
+@font-face {
+    font-family: 'Aeonik Pro';
+    font-style: normal;
+    font-weight: 500;
+    font-display: swap;
+    src: url('https://fonts-five.vercel.app/aeonik-pro/AeonikPro-Medium.woff2') format('woff2');
+}
+
+@font-face {
+    font-family: 'Aeonik Pro';
+    font-style: italic;
+    font-weight: 500;
+    font-display: swap;
+    src: url('https://fonts-five.vercel.app/aeonik-pro/AeonikPro-MediumItalic.woff2')
+        format('woff2');
+}
+
+@font-face {
+    font-family: 'Aeonik Pro';
+    font-style: normal;
+    font-weight: 600;
+    font-display: swap;
+    src: url('https://fonts-five.vercel.app/aeonik-pro/AeonikPro-Bold.woff2') format('woff2');
+}
+
+@font-face {
+    font-family: 'Aeonik Pro';
+    font-style: italic;
+    font-weight: 600;
+    font-display: swap;
+    src: url('https://fonts-five.vercel.app/aeonik-pro/AeonikPro-BoldItalic.woff2') format('woff2');
+}
+
+@font-face {
+    font-family: 'Aeonik Pro';
+    font-style: normal;
+    font-weight: 700;
+    font-display: swap;
+    src: url('https://fonts-five.vercel.app/aeonik-pro/AeonikPro-Black.woff2') format('woff2');
+}
+
+@font-face {
+    font-family: 'Aeonik Pro';
+    font-style: italic;
+    font-weight: 700;
+    font-display: swap;
+    src: url('https://fonts-five.vercel.app/aeonik-pro/AeonikPro-BlackItalic.woff2') format('woff2');
+}