diff --git a/index.html b/index.html
index 63d671c..f080688 100644
--- a/index.html
+++ b/index.html
@@ -21,12 +21,12 @@
   }
   </script>
 
-  <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&display=swap" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=DM+Serif+Display:ital@0;1&family=IBM+Plex+Mono:wght@400;500&display=swap" rel="stylesheet">
   <script src="https://cdn.tailwindcss.com"></script>
   <style>
-    @font-face{font-family:"Stain";src:url("https://cdn.jsdelivr.net/gh/multipleof4/stain.otf@master/dist/Stain.otf") format("opentype");font-weight:normal;font-style:normal}
-    body{font-family:"Stain",sans-serif}
-    .mono{font-family:"IBM Plex Mono",monospace}
+    @font-face{font-family:"Stain";src:url("https://cdn.jsdelivr.net/gh/multipleof4/stain.otf@master/dist/Stain.otf") format("opentype")}
+    body{font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif}
+    .mono{font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace}
   </style>
 </head>
 <body class="bg-gray-50 text-gray-800">
@@ -38,7 +38,7 @@
           Last updated <time id="last-updated" class="ml-1"></time>
         </span>
       </div>
-      <p class="text-base text-gray-600 max-w-lg mx-auto">
+      <p class="text-base text-gray-600 max-w-lg mx-auto" style="font-family:Stain,sans-serif">
         This benchmark tests the model's knowledge by tasking it to import the right library from the right CDN URL path and having the pre-existing library specific knowledge to correctly implement a solution for each challenging problem for/in the browser environment using JavaScript.
       </p>
     </header>
@@ -145,4 +145,3 @@
   </script>
 </body>
 </html>
-
