diff --git a/package-lock.json b/package-lock.json
index bbbf26d..8bbfe9d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,6 +9,7 @@
 			"version": "0.0.1",
 			"dependencies": {
 				"@tinacms/cli": "^1.5.43",
+				"astro-font": "^0.0.81",
 				"tinacms": "^1.6.1"
 			},
 			"devDependencies": {
@@ -6718,6 +6719,11 @@
 				"sharp": "^0.33.1"
 			}
 		},
+		"node_modules/astro-font": {
+			"version": "0.0.81",
+			"resolved": "https://registry.npmjs.org/astro-font/-/astro-font-0.0.81.tgz",
+			"integrity": "sha512-VmK4kqzNpOAt2LASVbw2cbbe9sD6K30E7jOjqzHxHieHMTWInkdOljtzHmNGvKr3P0MeF4Wy+Z7j6CdETFecDA=="
+		},
 		"node_modules/astro/node_modules/@astrojs/compiler": {
 			"version": "2.4.0",
 			"resolved": "https://registry.npmjs.org/@astrojs/compiler/-/compiler-2.4.0.tgz",
@@ -23432,6 +23438,11 @@
 				}
 			}
 		},
+		"astro-font": {
+			"version": "0.0.81",
+			"resolved": "https://registry.npmjs.org/astro-font/-/astro-font-0.0.81.tgz",
+			"integrity": "sha512-VmK4kqzNpOAt2LASVbw2cbbe9sD6K30E7jOjqzHxHieHMTWInkdOljtzHmNGvKr3P0MeF4Wy+Z7j6CdETFecDA=="
+		},
 		"async-lock": {
 			"version": "1.4.1",
 			"resolved": "https://registry.npmjs.org/async-lock/-/async-lock-1.4.1.tgz",
diff --git a/package.json b/package.json
index 29bb6e8..ba7a117 100644
--- a/package.json
+++ b/package.json
@@ -18,6 +18,7 @@
 	},
 	"dependencies": {
 		"@tinacms/cli": "^1.5.43",
+		"astro-font": "^0.0.81",
 		"tinacms": "^1.6.1"
 	}
 }
diff --git a/src/components/BaseHead.astro b/src/components/BaseHead.astro
index c74d50c..a85532f 100644
--- a/src/components/BaseHead.astro
+++ b/src/components/BaseHead.astro
@@ -1,5 +1,5 @@
 ---
-import "../style/fonts.css";
+import { AstroFont } from "astro-font";
 import "../style/global.css";
 
 import { SITE_TITLE, SITE_DESCRIPTION } from "../config";
@@ -44,4 +44,39 @@ const { title, description, image = "/home-blog-card.png" } = Astro.props;
 
 	<!-- Sitemap -->
 	<link rel="sitemap" href="/sitemap-index.xml" />
+
+	<!-- Fonts -->
+	<AstroFont
+      config={[
+        {
+          name: "iA",
+          src: [
+            {
+              style: 'normal',
+              weight: '400',
+              path: 'https://cdn.jsdelivr.net/fontsource/fonts/ia-writer-mono@latest/latin-400-normal.woff2'
+            },
+            {
+              style: 'normal',
+              weight: '700',
+              path: 'https://cdn.jsdelivr.net/fontsource/fonts/ia-writer-mono@latest/latin-700-normal.woff2'
+            },
+            {
+              style: 'italic',
+              weight: '400',
+              path: 'https://cdn.jsdelivr.net/fontsource/fonts/ia-writer-mono@latest/latin-400-italic.woff2'
+            },
+            {
+              style: 'italic',
+              weight: '700',
+              path: 'https://cdn.jsdelivr.net/fontsource/fonts/ia-writer-mono@latest/latin-700-italic.woff2'
+            },
+          ],
+          preload: false,
+          display: "swap",
+          fallback: "monospace",
+          cssVariable: "font-ia",
+        },
+      ]}
+    />
 </head>
diff --git a/src/style/fonts.css b/src/style/fonts.css
deleted file mode 100644
index e1a0ab0..0000000
--- a/src/style/fonts.css
+++ /dev/null
@@ -1,47 +0,0 @@
-/* ia-writer-mono-latin-400-normal */
-@font-face {
-	font-family: "iA Writer Mono";
-	font-style: normal;
-	font-display: swap;
-	font-weight: 400;
-	src: url(https://cdn.jsdelivr.net/fontsource/fonts/ia-writer-mono@latest/latin-400-normal.woff2)
-			format("woff2"),
-		url(https://cdn.jsdelivr.net/fontsource/fonts/ia-writer-mono@latest/latin-400-normal.woff)
-			format("woff");
-}
-
-/* ia-writer-mono-latin-700-normal */
-@font-face {
-	font-family: "iA Writer Mono";
-	font-style: normal;
-	font-display: swap;
-	font-weight: 700;
-	src: url(https://cdn.jsdelivr.net/fontsource/fonts/ia-writer-mono@latest/latin-700-normal.woff2)
-			format("woff2"),
-		url(https://cdn.jsdelivr.net/fontsource/fonts/ia-writer-mono@latest/latin-700-normal.woff)
-			format("woff");
-}
-
-/* ia-writer-mono-latin-400-italic */
-@font-face {
-	font-family: "iA Writer Mono";
-	font-style: italic;
-	font-display: swap;
-	font-weight: 400;
-	src: url(https://cdn.jsdelivr.net/fontsource/fonts/ia-writer-mono@latest/latin-400-italic.woff2)
-			format("woff2"),
-		url(https://cdn.jsdelivr.net/fontsource/fonts/ia-writer-mono@latest/latin-400-italic.woff)
-			format("woff");
-}
-
-/* ia-writer-mono-latin-700-italic */
-@font-face {
-	font-family: "iA Writer Mono";
-	font-style: italic;
-	font-display: swap;
-	font-weight: 700;
-	src: url(https://cdn.jsdelivr.net/fontsource/fonts/ia-writer-mono@latest/latin-700-italic.woff2)
-			format("woff2"),
-		url(https://cdn.jsdelivr.net/fontsource/fonts/ia-writer-mono@latest/latin-700-italic.woff)
-			format("woff");
-}
diff --git a/src/style/global.css b/src/style/global.css
index 3652de1..959a229 100644
--- a/src/style/global.css
+++ b/src/style/global.css
@@ -37,7 +37,7 @@ html,
 body,
 button,
 code {
-	font-family: "iA Writer Mono", monospace;
+	font-family: var(--font-ia);
 }
 h1,
 strong,