diff --git a/package.json b/package.json
index 2dbba13..3bfa99e 100644
--- a/package.json
+++ b/package.json
@@ -15,6 +15,7 @@
     "@astrojs/markdown-remark": "^5.3.0",
     "@astrojs/mdx": "^3.1.8",
     "@astrojs/solid-js": "^4.4.2",
+    "@fontsource-variable/rubik": "^5.1.0",
     "@hbsnow/rehype-sectionize": "^1.0.7",
     "@pagefind/default-ui": "^1.1.1",
     "@shikijs/rehype": "^1.22.0",
diff --git a/src/config/Head.astro b/src/config/Head.astro
index 5c59f5b..0117f8a 100644
--- a/src/config/Head.astro
+++ b/src/config/Head.astro
@@ -1,4 +1,7 @@
 ---
+import "@styles/global.css";
+import "@fontsource-variable/rubik";
+
 interface Props {
   title: string;
   description: string;
@@ -7,6 +10,11 @@ interface Props {
 const { title, description } = Astro.props;
 ---
 
+<meta charset="UTF-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1" />
+<meta name="generator" content={Astro.generator} />
+<link rel="canonical" href={Astro.url} />
+
 <title>{title}</title>
 <meta name="description" content={description} />
 <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
@@ -26,7 +34,3 @@ const { title, description } = Astro.props;
 <meta name="twitter:title" content={title} />
 <meta name="twitter:description" content={description} />
 <!-- <meta name="twitter:image" content={image} /> -->
-<!-- Font -->
-<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=Rubik:ital,wght@0,300..900;1,300..900&display=swap" rel="stylesheet"/>
diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro
index 6f2cca5..8ce9586 100644
--- a/src/layouts/BaseLayout.astro
+++ b/src/layouts/BaseLayout.astro
@@ -3,7 +3,6 @@ import Header from "@components/Header.astro";
 import Footer from "@src/components/Footer.astro";
 import Head from "@config/Head.astro";
 import PreTheme from "@config/PreTheme.astro";
-import "@styles/global.css";
 
 interface Props {
   title: string;
@@ -15,11 +14,7 @@ const { title, description } = Astro.props;
 
 <html lang="en" class="dark">
   <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="generator" content={Astro.generator} />
     <Head description={description} title={title} />
-    <link rel="canonical" href={Astro.url} />
     <PreTheme />
   </head>
   <body class="baselayout">
diff --git a/src/layouts/DocsLayout.astro b/src/layouts/DocsLayout.astro
index e9eedeb..4f33454 100644
--- a/src/layouts/DocsLayout.astro
+++ b/src/layouts/DocsLayout.astro
@@ -7,7 +7,6 @@ import PreTheme from "@config/PreTheme.astro";
 import Header from "@components/Header.astro";
 import Head from "@config/Head.astro";
 import Nav from "@components/navigation/sidebars/Nav.astro";
-import "@styles/global.css";
 import type { ConfigHeading } from "@src/components/navigation/sidebars/types";
 import Footer from "@src/components/Footer.astro";
 
@@ -55,11 +54,7 @@ if (url[2]) {
 
 <html lang="en" class="dark">
   <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="generator" content={Astro.generator} />
     <Head description={description} title={title} />
-    <link rel="canonical" href={Astro.url} />
     <PreTheme />
     <CreateCopyButtons />
   </head>
diff --git a/src/styles/css-config/base.css b/src/styles/css-config/base.css
index 6b2cd3f..c4a3d2e 100644
--- a/src/styles/css-config/base.css
+++ b/src/styles/css-config/base.css
@@ -1,5 +1,5 @@
 html {
-  font-family: "Rubik", Inter, system-ui, Avenir, Helvetica, Arial,
+  font-family: "Rubik Variable", Inter, system-ui, Avenir, Helvetica, Arial,
     sans-serif;
   font-size: 14px;
   line-height: 1.272;
diff --git a/yarn.lock b/yarn.lock
index f9e4494..bb6bfe6 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -863,6 +863,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@fontsource-variable/rubik@npm:^5.1.0":
+  version: 5.1.0
+  resolution: "@fontsource-variable/rubik@npm:5.1.0"
+  checksum: 10c0/73f6aba23714e9dcb6942ac295e7a62210256f696dd5a56aa0a18969c29438c7aa3f54b79ec02ac651ad075d1f552ee482995fc367e8d27244cbcd01a5b13cf4
+  languageName: node
+  linkType: hard
+
 "@hbsnow/rehype-sectionize@npm:^1.0.7":
   version: 1.0.7
   resolution: "@hbsnow/rehype-sectionize@npm:1.0.7"
@@ -6674,6 +6681,7 @@ __metadata:
     "@astrojs/solid-js": "npm:^4.4.2"
     "@astrojs/ts-plugin": "npm:^1.10.3"
     "@biomejs/biome": "npm:^1.8.3"
+    "@fontsource-variable/rubik": "npm:^5.1.0"
     "@hbsnow/rehype-sectionize": "npm:^1.0.7"
     "@pagefind/default-ui": "npm:^1.1.1"
     "@shikijs/rehype": "npm:^1.22.0"
