diff --git a/bun.lockb b/bun.lockb
index 5ee80d8..f1bc8f3 100755
Binary files a/bun.lockb and b/bun.lockb differ
diff --git a/package.json b/package.json
index 47cf3bc..89c88c5 100644
--- a/package.json
+++ b/package.json
@@ -12,6 +12,7 @@
   },
   "dependencies": {
     "@astrojs/svelte": "^5.6.0",
+    "@fontsource-variable/plus-jakarta-sans": "^5.0.21",
     "activity-calendar-widget": "^0.0.14",
     "octokit": "^4.0.2",
     "svelte": "^4.2.18",
diff --git a/src/components/BaseHead.astro b/src/components/BaseHead.astro
index 80c743a..8679e88 100644
--- a/src/components/BaseHead.astro
+++ b/src/components/BaseHead.astro
@@ -1,6 +1,7 @@
 ---
 // Import the global.css file here so that it is included on
 // all pages through the use of the <BaseHead /> component.
+import "@fontsource-variable/plus-jakarta-sans";
 import "../styles/global.css";
 import { ViewTransitions } from "astro:transitions";
 
@@ -21,14 +22,6 @@ const { title, description, image = "/blog-placeholder-1.jpg" } = Astro.props;
 <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
 <meta name="generator" content={Astro.generator} />
 
-<!-- Font preloads -->
-<link rel="preconnect" href="https://fonts.googleapis.com" />
-<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-<link
-  href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap"
-  rel="stylesheet"
-/>
-
 <!-- Canonical URL -->
 <link rel="canonical" href={canonicalURL} />