diff --git a/src/app/styles/app.css b/src/app/styles/app.css
index f574f19..2461f0d 100644
--- a/src/app/styles/app.css
+++ b/src/app/styles/app.css
@@ -117,6 +117,8 @@
   }
   body {
     @apply bg-background text-foreground;
+    font-family: 'Karla', system-ui, sans-serif;
+    font-optical-sizing: auto;
   }
 }
 
diff --git a/src/app/ui/Layout.svelte b/src/app/ui/Layout.svelte
index 1764df0..f3b6872 100644
--- a/src/app/ui/Layout.svelte
+++ b/src/app/ui/Layout.svelte
@@ -26,6 +26,13 @@ let { children } = $props();
     <link rel="icon" href={favicon} />
     <link rel="preconnect" href="https://api.fontshare.com" />
     <link rel="preconnect" href="https://cdn.fontshare.com" crossorigin="anonymous" />
+
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="anonymous">
+    <link
+        href="https://fonts.googleapis.com/css2?family=Karla:ital,wght@0,200..800;1,200..800&display=swap"
+        rel="stylesheet"
+    >
 </svelte:head>
 
 <div id="app-root">