diff --git a/public/css/global.css b/public/css/global.css
index 2e8b152..48ab81a 100644
--- a/public/css/global.css
+++ b/public/css/global.css
@@ -19,6 +19,10 @@
 
 :root {
     --c-thp: #f472b6;
+
+    --font-display: 'Atkinson Hyperlegible', sans-serif;
+    --font-body: 'Atkinson Hyperlegible', sans-serif;
+    --font-code: "Iosevka Fixed Web", "Iosevka Nerd Font", Iosevka, monospace;
 }
 
 :root {
@@ -64,7 +68,7 @@ html {
 }
 
 body {
-    font-family: Inter, 'Fira Sans', Inter, sans-serif;
+    font-family: var(--font-body);
 }
 
 @media only screen and (max-width: 600px) {
@@ -75,7 +79,7 @@ body {
 
 pre,
 code {
-    font-family: "Iosevka Fixed Web", "Iosevka Nerd Font", Iosevka, monospace;
+    font-family: var(--font-code);
 }
 
 .button-effect-receiver {
diff --git a/public/css/pages.css b/public/css/pages.css
index 33aa2cb..b52cfd5 100644
--- a/public/css/pages.css
+++ b/public/css/pages.css
@@ -4,7 +4,7 @@
     line-height: 2.5rem;
     margin-bottom: 1rem;
     margin-top: 2rem;
-    font-family: Outfit, Inter, sans-serif;
+    font-family: var(--font-display);
     opacity: 0.9;
     font-weight: 700;
     color: var(--c-text-2);
@@ -16,7 +16,7 @@
     line-height: 2rem;
     margin-bottom: 1rem;
     margin-top: 2.5rem;
-    font-family: Outfit, Inter, sans-serif;
+    font-family: var(--font-display);
     opacity: 0.9;
     font-weight: 600;
     color: var(--c-text-2);
@@ -36,7 +36,7 @@
     line-height: 1.75rem;
     margin-bottom: 1rem;
     margin-top: 1.75rem;
-    font-family: Outfit, Inter, sans-serif;
+    font-family: var(--font-display);
     opacity: 0.9;
     font-weight: 400;
     color: var(--c-text-2);
diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro
index 47e355d..57d3348 100644
--- a/src/layouts/BaseLayout.astro
+++ b/src/layouts/BaseLayout.astro
@@ -24,7 +24,7 @@ const { title } = Astro.props;
         <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=Inter:wght@100..900&family=Outfit:wght@100..900&display=swap"
+            href="https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:ital,wght@0,400;0,700;1,400;1,700&display=swap"
             rel="stylesheet"
         />
     </head>
diff --git a/src/layouts/PagesLayout.astro b/src/layouts/PagesLayout.astro
index bdfeae3..6a7cdf9 100644
--- a/src/layouts/PagesLayout.astro
+++ b/src/layouts/PagesLayout.astro
@@ -77,7 +77,7 @@ for (const entry of pagesIndex) {
 <BaseLayout title={frontmatter.title}>
     <Navbar />
 
-    <div class="lg:grid lg:grid-cols-[14rem_auto_12rem] lg:container mx-auto">
+    <div class="lg:grid lg:grid-cols-[14rem_auto_12rem] lg:container mx-auto font-display">
         <div
             id="sidebar"
             class="pt-12 h-screen lg:sticky top-0 fixed z-10 bg-c-bg w-60 lg:w-auto border-r-2 lg:border-0
diff --git a/src/pages/learn/basics/variables.mdx b/src/pages/learn/basics/variables.mdx
index 21d6627..f41ac91 100644
--- a/src/pages/learn/basics/variables.mdx
+++ b/src/pages/learn/basics/variables.mdx
@@ -48,6 +48,13 @@ Int year_of_birth = 1984
 
 This means that if a variable only has a datatype, it is immutable.
 
+It is a compile error to declare a variable of a datatype,
+but use another.
+
+<Code thpcode={`
+// Declare the variable as a String, but use a Float as its value
+String capital = 123.456
+`} />
 
 
 ## Mutable variables
diff --git a/tailwind.config.mjs b/tailwind.config.mjs
index 937fda6..f42d97a 100644
--- a/tailwind.config.mjs
+++ b/tailwind.config.mjs
@@ -20,9 +20,9 @@ export default {
             }
         },
         fontFamily: {
-            "mono": ["'Iosevka Fixed Web'", "Iosevka", "'Iosevka Nerd Font'", "monospace"],
-            "display": ["Outfit", "Inter", "sans-serif"],
-            "body": ["Inter", "sans-serif"],
+            "mono": "var(--font-code)",
+            "display": "var(--font-display)",
+            "body": "var(--font-body)",
         },
 	},
 	corePlugins: {