diff --git a/package.json b/package.json
index 44e7ac8..d21ee07 100644
--- a/package.json
+++ b/package.json
@@ -12,6 +12,7 @@
     "@astrojs/node": "^9.5.2",
     "@astrojs/solid-js": "^5.1.3",
     "@fontsource-variable/inter": "^5.2.8",
+    "@fontsource-variable/roboto-slab": "^5.2.8",
     "@tailwindcss/vite": "^4.1.18",
     "astro": "^5.16.10",
     "astro-icon": "^1.1.5",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 373958c..4d131b5 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -17,6 +17,9 @@ importers:
       '@fontsource-variable/inter':
         specifier: ^5.2.8
         version: 5.2.8
+      '@fontsource-variable/roboto-slab':
+        specifier: ^5.2.8
+        version: 5.2.8
       '@tailwindcss/vite':
         specifier: ^4.1.18
         version: 4.1.18(vite@6.4.1(@types/node@25.0.9)(jiti@2.6.1)(lightningcss@1.30.2)(yaml@2.7.0))
@@ -468,6 +471,9 @@ packages:
   '@fontsource-variable/inter@5.2.8':
     resolution: {integrity: sha512-kOfP2D+ykbcX/P3IFnokOhVRNoTozo5/JxhAIVYLpea/UBmCQ/YWPBfWIDuBImXX/15KH+eKh4xpEUyS2sQQGQ==}
 
+  '@fontsource-variable/roboto-slab@5.2.8':
+    resolution: {integrity: sha512-cdvOSwocP50xS01gXqnGxw7uFcCZQgn1IDlqiAmNuZP4uEVScYAKMDC+aWsbP1grn9QdMJ2frhcuVBNXniBVGA==}
+
   '@iconify-json/heroicons@1.2.3':
     resolution: {integrity: sha512-n+vmCEgTesRsOpp5AB5ILB6srsgsYK+bieoQBNlafvoEhjVXLq8nIGN4B0v/s4DUfa0dOrjwE/cKJgIKdJXOEg==}
 
@@ -3178,6 +3184,8 @@ snapshots:
 
   '@fontsource-variable/inter@5.2.8': {}
 
+  '@fontsource-variable/roboto-slab@5.2.8': {}
+
   '@iconify-json/heroicons@1.2.3':
     dependencies:
       '@iconify/types': 2.0.0
diff --git a/src/assets/fonts/RobotoSlab-VariableFont_wght.ttf b/src/assets/fonts/RobotoSlab-VariableFont_wght.ttf
deleted file mode 100644
index 934c671..0000000
Binary files a/src/assets/fonts/RobotoSlab-VariableFont_wght.ttf and /dev/null differ
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index 4f98a07..d22473f 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -2,6 +2,7 @@
 import Header from "../components/Header.astro";
 import Footer from "../components/Footer.astro";
 import { siteConfig } from "../config/site";
+import "@fontsource-variable/roboto-slab";
 import "../styles/global.css";
 
 interface Props {
diff --git a/src/styles/global.css b/src/styles/global.css
index 40475d2..2057d6c 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -36,25 +36,12 @@
     --noise: 0;
 }
 
-@font-face {
-    font-family: "Roboto Slab";
-    src: url("../assets/fonts/RobotoSlab-VariableFont_wght.ttf")
-        format("truetype");
-    font-weight: 100 900;
-    font-style: normal;
-    font-display: optional;
-}
-
 html {
     scroll-behavior: smooth;
 }
 
 body {
-    font-family:
-        "Roboto Slab",
-        system-ui,
-        -apple-system,
-        sans-serif;
+    font-family: "Roboto Slab Variable", serif;
 }
 
 .text-rotate:hover,