diff --git a/package-lock.json b/package-lock.json
index 3f63faa..06b3ae7 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,10 +11,14 @@
         "@astrojs/mdx": "^2.0.0",
         "@astrojs/svelte": "^5.0.0",
         "astro": "^4.0.1",
+        "astro-font": "^0.0.72",
         "reading-time": "^1.5.0",
         "rehype-external-links": "^3.0.0",
         "remark-gfm": "^4.0.0",
         "remark-smartypants": "^2.0.0"
+      },
+      "devDependencies": {
+        "@types/node": "^20.11.3"
       }
     },
     "node_modules/@ampproject/remapping": {
@@ -1502,6 +1506,15 @@
         "@types/unist": "^2"
       }
     },
+    "node_modules/@types/node": {
+      "version": "20.11.3",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.11.3.tgz",
+      "integrity": "sha512-nrlmbvGPNGaj84IJZXMPhQuCMEVTT/hXZMJJG/aIqVL9fKxqk814sGGtJA4GI6hpJSLQjpi6cn0Qx9eOf9SDVg==",
+      "devOptional": true,
+      "dependencies": {
+        "undici-types": "~5.26.4"
+      }
+    },
     "node_modules/@types/unist": {
       "version": "2.0.8",
       "resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.8.tgz",
@@ -1719,6 +1732,11 @@
         "sharp": "^0.32.5"
       }
     },
+    "node_modules/astro-font": {
+      "version": "0.0.72",
+      "resolved": "https://registry.npmjs.org/astro-font/-/astro-font-0.0.72.tgz",
+      "integrity": "sha512-FUjIerovSg2lsfJfvvqY23hgvc++gHi69ikFkxm0mqO3MPFykK5ppeUuROUjhNbE6vwdD8MpiJOy1CR5S0g/lQ=="
+    },
     "node_modules/astro/node_modules/@types/unist": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.2.tgz",
@@ -7304,6 +7322,12 @@
         "node": ">=14.17"
       }
     },
+    "node_modules/undici-types": {
+      "version": "5.26.5",
+      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-5.26.5.tgz",
+      "integrity": "sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==",
+      "devOptional": true
+    },
     "node_modules/unherit": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/unherit/-/unherit-3.0.1.tgz",
diff --git a/package.json b/package.json
index 933e5ba..5a5f190 100644
--- a/package.json
+++ b/package.json
@@ -13,9 +13,13 @@
     "@astrojs/mdx": "^2.0.0",
     "@astrojs/svelte": "^5.0.0",
     "astro": "^4.0.1",
+    "astro-font": "^0.0.72",
     "reading-time": "^1.5.0",
     "rehype-external-links": "^3.0.0",
     "remark-gfm": "^4.0.0",
     "remark-smartypants": "^2.0.0"
+  },
+  "devDependencies": {
+    "@types/node": "^20.11.3"
   }
 }
diff --git a/src/components/BaseHead.astro b/src/components/BaseHead.astro
index 6e48d84..8b24e77 100644
--- a/src/components/BaseHead.astro
+++ b/src/components/BaseHead.astro
@@ -1,16 +1,17 @@
 ---
-import { ViewTransitions } from 'astro:transitions'
-import '../styles/fonts.css'
-import '../styles/global.css'
+import "../styles/global.css";
+import { join } from "node:path";
+import { AstroFont } from "astro-font";
+import { ViewTransitions } from "astro:transitions";
 
 export interface Props {
-  title: string
-  description: string
-  permalink: string
+  title: string;
+  description: string;
+  permalink: string;
 }
 
-const { title, description, permalink } = Astro.props
-const socialUrl = Astro.site.href + 'assets/social.png'
+const { title, description, permalink } = Astro.props;
+const socialUrl = Astro.site.href + "assets/social.png";
 ---
 
 <!-- Global Metadata -->
@@ -37,18 +38,89 @@ const socialUrl = Astro.site.href + 'assets/social.png'
 <meta property="twitter:description" content={description} />
 <meta property="twitter:image" content={socialUrl} />
 
+<AstroFont
+  config={[
+    {
+      name: "Fira Sans",
+      src: [
+        {
+          style: "normal",
+          weight: "700",
+          path: join(
+            process.cwd(),
+            "public",
+            "assets",
+            "fonts",
+            "va9B4kDNxMZdWfMOD5VnLK3eRhf6Xl7Glw.woff2"
+          ),
+          css: {
+            "unicode-range": `U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
+    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
+    U+FEFF, U+FFFD;`,
+          },
+        },
+      ],
+      preload: false,
+      display: "swap",
+      fallback: "sans-serif",
+      cssVariable: "font-family-sans",
+    },
+    {
+      name: "Merriweather",
+      src: [
+        {
+          style: "normal",
+          weight: "400",
+          path: join(
+            process.cwd(),
+            "public",
+            "assets",
+            "fonts",
+            "u-440qyriQwlOrhSvowK_l5-fCZMdeX3rg.woff2"
+          ),
+          css: {
+            "unicode-range": `U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
+    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
+    U+FEFF, U+FFFD;`,
+          },
+        },
+        {
+          style: "normal",
+          weight: "700",
+          path: join(
+            process.cwd(),
+            "public",
+            "assets",
+            "fonts",
+            "u-4n0qyriQwlOrhSvowK_l52xwNZWMf6hPvhPQ.woff2"
+          ),
+          css: {
+            "unicode-range": `U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
+    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
+    U+FEFF, U+FFFD;`,
+          },
+        },
+      ],
+      preload: false,
+      display: "swap",
+      fallback: "serif",
+      cssVariable: "font-family-serif",
+    },
+  ]}
+/>
+
 <ViewTransitions />
 
 <!-- This is intentionally inlined to avoid FOUC -->
 <script is:inline>
-  const root = document.documentElement
-  const theme = localStorage.getItem('theme')
+  const root = document.documentElement;
+  const theme = localStorage.getItem("theme");
   if (
-    theme === 'dark' ||
-    (!theme && window.matchMedia('(prefers-color-scheme: dark)').matches)
+    theme === "dark" ||
+    (!theme && window.matchMedia("(prefers-color-scheme: dark)").matches)
   ) {
-    root.classList.add('theme-dark')
+    root.classList.add("theme-dark");
   } else {
-    root.classList.remove('theme-dark')
+    root.classList.remove("theme-dark");
   }
 </script>
diff --git a/src/styles/fonts.css b/src/styles/fonts.css
deleted file mode 100644
index c6f0efb..0000000
--- a/src/styles/fonts.css
+++ /dev/null
@@ -1,36 +0,0 @@
-/* latin */
-@font-face {
-  font-family: 'Fira Sans';
-  font-style: normal;
-  font-weight: 700;
-  font-display: swap;
-  src: url(/assets/fonts/va9B4kDNxMZdWfMOD5VnLK3eRhf6Xl7Glw.woff2)
-    format('woff2');
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
-    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
-    U+FEFF, U+FFFD;
-}
-
-@font-face {
-  font-family: 'Merriweather';
-  font-style: normal;
-  font-weight: 400;
-  font-display: swap;
-  src: url(/assets/fonts/u-440qyriQwlOrhSvowK_l5-fCZMdeX3rg.woff2)
-    format('woff2');
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
-    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
-    U+FEFF, U+FFFD;
-}
-
-@font-face {
-  font-family: 'Merriweather';
-  font-style: normal;
-  font-weight: 700;
-  font-display: swap;
-  src: url(/assets/fonts/u-4n0qyriQwlOrhSvowK_l52xwNZWMf6hPvhPQ.woff2)
-    format('woff2');
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
-    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
-    U+FEFF, U+FFFD;
-}
diff --git a/src/styles/global.css b/src/styles/global.css
index 8638ab2..580f0c6 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -3,8 +3,6 @@
   --text-main: #36393b;
   --text-secondary: #6b6f72;
   --primary-color: #548e9b;
-  --font-family-serif: Merriweather, serif;
-  --font-family-sans: 'Fira Sans', sans-serif;
 }
 
 :root.theme-dark {