diff --git a/assets/scss/astro-ecommerce/_variables.scss b/assets/scss/astro-ecommerce/_variables.scss
index 067706c4..b5497995 100644
--- a/assets/scss/astro-ecommerce/_variables.scss
+++ b/assets/scss/astro-ecommerce/_variables.scss
@@ -592,8 +592,8 @@ $aspect-ratios: (
 // Font, line-height, and color for body text, headings, and more.
 
 // stylelint-disable value-keyword-case
-$font-family-sans-serif:      'Noto Sans', 'Open Sans' !default;
-$font-family-pt-mono:         'PT Mono' !default;
+$font-family-sans-serif:      var(--font-noto-sans), var(--font-open-sans) !default;
+$font-family-pt-mono:         var(--font-pt-mono) !default;
 $font-family-monospace:       SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default;
 // stylelint-enable value-keyword-case
 $font-family-base:            var(--bs-font-sans-serif) !default;
diff --git a/package-lock.json b/package-lock.json
index 76851164..89c98c06 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,6 +12,7 @@
         "@types/react": "^18.0.21",
         "@types/react-dom": "^18.0.6",
         "astro": "^2.0.1",
+        "astro-font": "^0.0.77",
         "forward-ref": "^1.0.0",
         "json-server": "^0.17.0",
         "react": "^18.2.0",
@@ -1578,6 +1579,11 @@
         }
       }
     },
+    "node_modules/astro-font": {
+      "version": "0.0.77",
+      "resolved": "https://registry.npmjs.org/astro-font/-/astro-font-0.0.77.tgz",
+      "integrity": "sha512-dh5TX2uxwqdFq15DF9cbRZgEdE9o8q522MP6xZYs+rnd3dexfDsIJMeEIDNVO7rkRxwJ7sphhCqTmdWvUJaiDg=="
+    },
     "node_modules/astro/node_modules/lru-cache": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
diff --git a/package.json b/package.json
index 6026fba6..30566501 100644
--- a/package.json
+++ b/package.json
@@ -15,6 +15,7 @@
     "@types/react": "^18.0.21",
     "@types/react-dom": "^18.0.6",
     "astro": "^5.5.5",
+    "astro-font": "^0.0.77",
     "forward-ref": "^1.0.0",
     "json-server": "^0.17.0",
     "react": "^18.2.0",
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index 23c06582..89acd893 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -1,4 +1,6 @@
 ---
+import { AstroFont } from 'astro-font';
+
 export interface Props {
 	title: string;
 }
@@ -12,9 +14,36 @@ const { title } = Astro.props;
 		<meta charset="UTF-8" />
 		<meta name="viewport" content="width=device-width" />
 		<link rel="icon" type="image/svg+xml" href={`${import.meta.env.BASE_URL}favicon.svg`} />
-    <link
-      href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700|Noto+Sans:300,400,500,600,700,800|PT+Mono:300,400,500,600,700"
-      rel="stylesheet"
+    <AstroFont
+      config={[
+        {
+          src: [],
+          preload: false,
+          display: "swap",
+          name: "Noto Sans",
+          fallback: "sans-serif",
+          cssVariable: "font-noto-sans",
+          googleFontsURL: 'https://fonts.googleapis.com/css?family=Noto+Sans:300,400,500,600,700,800',
+        },
+        {
+          src: [],
+          preload: false,
+          display: "swap",
+          name: "Open Sans",
+          fallback: "sans-serif",
+          cssVariable: "font-open-sans",
+          googleFontsURL: 'https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700',
+        },
+        {
+          src: [],
+          preload: false,
+          display: "swap",
+          name: "PT Mono",
+          fallback: "sans-serif",
+          cssVariable: "font-pt-mono",
+          googleFontsURL: 'https://fonts.googleapis.com/css?family=PT+Mono:300,400,500,600,700',
+        },
+      ]}
     />
 		<meta name="generator" content={Astro.generator} />
 		<title>{title}</title>