diff --git a/app/views/general/404.phtml b/app/views/general/404.phtml
index 7ec1cfbf21..5e63344c8a 100644
--- a/app/views/general/404.phtml
+++ b/app/views/general/404.phtml
@@ -7,6 +7,8 @@
     <title>404 Not Found</title>
 
     <style>
+        @import url(https://fonts.bunny.net/css?family=fira-code:400|inter:400);
+
         * {
             margin: 0;
             padding: 0;
@@ -36,7 +38,7 @@
             background: var(--color-overlay-on-neutral, rgba(0, 0, 0, 0.06));
             color: var(--color-fgColor-neutral-secondary, #56565C);
             text-align: center;
-            font-family: var(--font-family-sansSerif, Inter);
+            font-family: var(--font-family-sansSerif, Inter), sans-serif;
             font-size: var(--font-size-S, 14px);
             font-style: normal;
             font-weight: 400;
@@ -47,7 +49,7 @@
         h1 {
             color: var(--color-fgColor-neutral-primary, #2D2D31);
             text-align: center;
-            font-family: var(--font-family-sansSerif, Inter);
+            font-family: var(--font-family-sansSerif, Inter), sans-serif;
             font-size: var(--font-size-XXXL, 32px);
             font-style: normal;
             font-weight: 400;
@@ -59,7 +61,7 @@
 
         button {
             border-radius: var(--border-radius-S, 8px);
-            font-family: var(--font-family-sansSerif, Inter);
+            font-family: var(--font-family-sansSerif, Inter), sans-serif;
             font-size: var(--font-size-S, 14px);
             font-style: normal;
             font-weight: 500;
@@ -88,7 +90,7 @@
         }
 
         .brand p {
-            font-family: var(--font-family-monospace, "Aeonik Fono");
+            font-family: var(--font-family-monospace, "Fira Code"), monospace;
             font-size: var(--font-size-XS, 12px);
             font-style: normal;
             font-weight: 400;
diff --git a/src/Appwrite/Transformation/Adapter/Preview.php b/src/Appwrite/Transformation/Adapter/Preview.php
index 94f1454593..352dc97204 100644
--- a/src/Appwrite/Transformation/Adapter/Preview.php
+++ b/src/Appwrite/Transformation/Adapter/Preview.php
@@ -33,6 +33,8 @@ class Preview extends Adapter
 
         $banner = <<<EOT
         <style>
+            @import url(https://fonts.bunny.net/css?family=fira-code:400|inter:400);
+            
             #appwrite-preview {
                 padding: 0;
                 margin: 0;
@@ -80,7 +82,7 @@ class Preview extends Adapter
                 padding: 0;
                 margin: 0;
                 color: var(--color-fgColor-neutral-secondary, #56565C);
-                font-family: var(--font-family-sansSerif, Inter);
+                font-family: var(--font-family-sansSerif, Inter), sans-serif;
                 font-size: var(--font-size-XS, 12px);
                 font-style: normal;
                 font-weight: 500;
@@ -97,7 +99,7 @@ class Preview extends Adapter
                 padding: var(--space-1, 2px) var(--space-2, 4px);
                 color: var(--color-fgColor-neutral-secondary, #56565C);
                 text-align: center;
-                font-family: var(--font-family-sansSerif, Inter);
+                font-family: var(--font-family-sansSerif, Inter), sans-serif;
                 font-size: var(--font-size-XS, 12px);
                 font-style: normal;
                 font-weight: 400;
@@ -120,7 +122,7 @@ class Preview extends Adapter
 
                 #appwrite-preview-text {
                 color: var(--color-fgColor-neutral-secondary, #C3C3C6);
-                    font-family: var(--font-family-sansSerif, Inter);
+                    font-family: var(--font-family-sansSerif, Inter), sans-serif;
                     font-size: var(--font-size-XS, 12px);
                 }