diff --git a/web/package-lock.json b/web/package-lock.json
index cd662a92..ff24cf68 100644
--- a/web/package-lock.json
+++ b/web/package-lock.json
@@ -7,6 +7,8 @@
       "name": "divan-web",
       "dependencies": {
         "@astrojs/node": "^11.1.7",
+        "@fontsource/noto-naskh-arabic": "^5.3.0",
+        "@fontsource/noto-nastaliq-urdu": "^5.3.0",
         "astro": "^7.3.8"
       }
     },
@@ -568,6 +570,24 @@
         "tslib": "^2.4.0"
       }
     },
+    "node_modules/@fontsource/noto-naskh-arabic": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/@fontsource/noto-naskh-arabic/-/noto-naskh-arabic-5.3.0.tgz",
+      "integrity": "sha512-S/GDgQ6mh/PKo4mz5+eXNYbEarvpI7yh6eCdOz8tTVbeM7+OUiacIEscaYEibr/+egDtGbO2ZB00sjy1bJC1kQ==",
+      "license": "OFL-1.1",
+      "funding": {
+        "url": "https://github.com/sponsors/ayuhito"
+      }
+    },
+    "node_modules/@fontsource/noto-nastaliq-urdu": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/@fontsource/noto-nastaliq-urdu/-/noto-nastaliq-urdu-5.3.0.tgz",
+      "integrity": "sha512-rhozTu22mlnDp5R8A4gGeNJvoLroHEV0TytCwly20w1LMA+VXs/MyhORGJu3i3SWZFdyeCFe5EF5xzraq6zd6A==",
+      "license": "OFL-1.1",
+      "funding": {
+        "url": "https://github.com/sponsors/ayuhito"
+      }
+    },
     "node_modules/@img/colour": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@img/colour/-/colour-1.1.0.tgz",
diff --git a/web/package.json b/web/package.json
index dd686e0a..dcd77516 100644
--- a/web/package.json
+++ b/web/package.json
@@ -10,6 +10,8 @@
   },
   "dependencies": {
     "@astrojs/node": "^11.1.7",
+    "@fontsource/noto-naskh-arabic": "^5.3.0",
+    "@fontsource/noto-nastaliq-urdu": "^5.3.0",
     "astro": "^7.3.8"
   }
 }
diff --git a/web/src/layouts/Base.astro b/web/src/layouts/Base.astro
index dbe91fad..73f8d97c 100644
--- a/web/src/layouts/Base.astro
+++ b/web/src/layouts/Base.astro
@@ -1,4 +1,9 @@
 ---
+// fonts are self-hosted (no Google Fonts request; works with Brave Shields and offline)
+import '@fontsource/noto-naskh-arabic/400.css';
+import '@fontsource/noto-naskh-arabic/700.css';
+import '@fontsource/noto-nastaliq-urdu/400.css';
+import '@fontsource/noto-nastaliq-urdu/700.css';
 import '../styles/global.css';
 interface Props { title?: string; description?: string; q?: string }
 const { title, description = 'اردو کی کلاسیکی شاعری اور نثر', q = '' } = Astro.props;
@@ -12,12 +17,12 @@ const fullTitle = title ? `${title} · دیوان` : 'دیوان · اردو ک
     <title>{fullTitle}</title>
     <meta name="description" content={description} />
     <link rel="icon" href="/favicon.svg" type="image/svg+xml" />
-    <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=Noto+Naskh+Arabic:wght@400..700&family=Noto+Nastaliq+Urdu:wght@400..700&display=swap" rel="stylesheet" />
     <script is:inline>
       // font + theme choice applied before paint (Naskh and system theme by default)
       try {
+        // ?font=nastaliq|naskh in the URL sets the choice (shareable links)
+        const f = new URLSearchParams(location.search).get('font');
+        if (f === 'nastaliq' || f === 'naskh') localStorage.setItem('divan-font', f);
         if (localStorage.getItem('divan-font') === 'nastaliq') document.documentElement.classList.add('nastaliq');
         const t = localStorage.getItem('divan-theme');
         if (t) document.documentElement.dataset.theme = t;