diff --git a/web/src/components/Icon.astro b/web/src/components/Icon.astro
index 0e6ace67..c14b9a46 100644
--- a/web/src/components/Icon.astro
+++ b/web/src/components/Icon.astro
@@ -6,8 +6,8 @@ const PATHS = {
   admin: '<path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"/>',
   edit: '<path d="M12 20h9"/><path d="M16.376 3.622a1 1 0 0 1 3.002 3.002L7.368 18.635a2 2 0 0 1-.855.506l-2.872.838a.5.5 0 0 1-.62-.62l.838-2.872a2 2 0 0 1 .506-.854z"/>',
   bookmark: '<path d="m19 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16z"/>',
-  // the word book: a book with the letter ع (an Urdu letter, not a Latin A)
-  words: '<path d="M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H19a1 1 0 0 1 1 1v18a1 1 0 0 1-1 1H6.5a1 1 0 0 1 0-5H20"/><text x="12.4" y="14.6" text-anchor="middle" font-size="15" font-weight="700" font-family="Noto Naskh Arabic, serif" fill="currentColor" stroke="none">ع</text>',
+  // the word book: a book; the letter ع is laid over it as text (.glyph-icon), which every browser draws the same
+  words: '<path d="M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H19a1 1 0 0 1 1 1v18a1 1 0 0 1-1 1H6.5a1 1 0 0 1 0-5H20"/>',
   user: '<circle cx="12" cy="8" r="5"/><path d="M20 21a8 8 0 0 0-16 0"/>',
   login: '<path d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4"/><path d="m10 17 5-5-5-5"/><path d="M15 12H3"/>',
   logout: '<path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/><path d="m16 17 5-5-5-5"/><path d="M21 12H9"/>',
diff --git a/web/src/layouts/Base.astro b/web/src/layouts/Base.astro
index 5d6abd4e..758897c2 100644
--- a/web/src/layouts/Base.astro
+++ b/web/src/layouts/Base.astro
@@ -48,12 +48,12 @@ import Icon from '../components/Icon.astro';
           {Astro.locals.user?.role === 'admin' && <a class="icon-btn" href="/admin" title="ایڈمن" aria-label="ایڈمن"><Icon name="admin" /></a>}
           {['mod-l2', 'mod-l1', 'admin'].includes(Astro.locals.user?.role ?? '') && <a class="icon-btn" href="/mod" title="موڈریشن" aria-label="موڈریشن"><Icon name="edit" /></a>}
           {Astro.locals.user && <a class="icon-btn" href="/library" title="محفوظ شدہ" aria-label="محفوظ شدہ"><Icon name="bookmark" /></a>}
-          {Astro.locals.user && <a class="icon-btn" href="/words" title="ذخیرۂ الفاظ" aria-label="ذخیرۂ الفاظ"><Icon name="words" /></a>}
+          {Astro.locals.user && <a class="icon-btn" href="/words" title="ذخیرۂ الفاظ" aria-label="ذخیرۂ الفاظ"><span class="glyph-icon"><Icon name="words" /><span aria-hidden="true">ع</span></span></a>}
           {Astro.locals.user
             ? <a class="icon-btn" href="/account" title={`اکاؤنٹ: ${Astro.locals.user.full_name || Astro.locals.user.email}`} aria-label="اکاؤنٹ"><Icon name="user" /></a>
             : <a class="icon-btn" href={`/signin?next=${encodeURIComponent(Astro.url.pathname)}`} title="لاگ ان" aria-label="لاگ ان"><Icon name="login" /></a>}
           <label class="font-pick" title="خط"><Icon name="font" size={18} /><select id="font-select" aria-label="خط">
-            <option value="naskh" class="f-naskh">نسخ</option><option value="nastaliq" class="f-nastaliq">نستعلیق</option>
+            <option value="naskh">نسخ</option><option value="nastaliq">نستعلیق</option>
           </select></label>
           <button type="button" class="icon-btn" id="theme-toggle" aria-label="روشن یا تاریک" title="روشن یا تاریک"><Icon name="theme" /></button>
           {Astro.locals.user && (
diff --git a/web/src/styles/global.css b/web/src/styles/global.css
index 8d7b7d2c..99a935f5 100644
--- a/web/src/styles/global.css
+++ b/web/src/styles/global.css
@@ -481,11 +481,13 @@ h1 + .muted { text-align: center; margin-top: 0; }
 .icon { flex: none; }
 .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
 .icon-btn.small { width: 30px; height: 30px; }
-/* the font picker in the header: the icon and a list; each name in its own font */
+/* the font picker in the header: the icon and a list */
 .font-pick { display: inline-flex; align-items: center; gap: 4px; height: 36px; padding: 0 4px 0 10px; border: 1.5px solid var(--border); border-radius: 999px;
   background: var(--inner); color: var(--ink); cursor: pointer; }
 .font-pick:hover, .font-pick:focus-within { border-color: var(--brand); color: var(--brand); }
-.font-pick select { font: inherit; font-family: 'Noto Naskh Arabic', serif; font-size: .85rem; border: 0; background: transparent; color: inherit; cursor: pointer; padding: 0 2px; }
+.font-pick select { font: 400 .85rem/1.4 'Noto Naskh Arabic', serif; height: 28px; border: 0; background: transparent; color: inherit;
+  cursor: pointer; padding: 0 2px; } /* Naskh at a fixed height whatever the reading font (Nastaliq would spill out) */
 .font-pick select:focus { outline: none; }
-.font-pick .f-naskh { font-family: 'Noto Naskh Arabic', serif; }
-.font-pick .f-nastaliq { font-family: 'Noto Nastaliq Urdu', serif; }
+.glyph-icon { position: relative; display: inline-flex; }
+.glyph-icon > span { position: absolute; inset: 0 0 4px 2px; display: flex; align-items: center; justify-content: center;
+  font: 700 11px/1 'Noto Naskh Arabic', serif; }