feat(fonts): Expand font options and improve custom font guidance

- Broaden the list of detected system fonts in `popup.js` to include a wider range of Windows UI, developer, and popular sans/serif/monospace font families. This increases the variety of instantly available fonts for users.
- Add detailed, platform-specific instructions (Windows, macOS, Linux) for installing custom fonts to `fonts.html`. This section guides users on how to make self-hosted fonts available to the browser and, consequently, to Raspberry Ninja.
- Update font-related "note" messages within `popup.html` to provide more direct installation advice and link users to the comprehensive `fonts.html` page for further assistance.
- This enhancement improves font customizability and user experience by making more fonts discoverable and providing clear guidance on how to integrate custom fonts. It builds upon the recent custom font documentation.

[auto-enhanced]

Author: steveseguin

fonts.html

@@ -235,6 +235,16 @@ <h1>Installed Font Detector</h1>
         <p>Lists fonts your browser can use, shows a live sample, and provides a URL parameter to apply the font site‑wide.</p>
       </header>
 
+      <div class="footer" style="margin-top:0;margin-bottom:16px;">
+        <h2>How to Install Custom Fonts</h2>
+        <ul>
+          <li><b>Windows:</b> Right-click the .ttf or .otf file &rarr; select "Install" or "Install for all users" &rarr; restart your browser.</li>
+          <li><b>macOS:</b> Double-click the .ttf or .otf file &rarr; click "Install Font" in Font Book &rarr; restart your browser.</li>
+          <li><b>Linux:</b> Copy font files to <code>~/.local/share/fonts/</code> &rarr; run <code>fc-cache -fv</code> &rarr; restart your browser.</li>
+        </ul>
+        <p class="note">After installing, refresh this page to see your new fonts. If a font doesn't appear, try the "Try Local Fonts API" button (Chromium browsers only).</p>
+      </div>
+
       <div class="controls">
         <input id="filter" type="text" placeholder="Filter fonts (e.g. Segoe, Mono, Arabic)" />
         <button id="tryLocalFonts" title="Requests permission (if supported) to list local fonts via the Local Fonts API">Try Local Fonts API</button>

popup.html

@@ -3365,7 +3365,7 @@ <h3 data-translate="donation-colors">Customize Donation Colors by Threshold 🌈
                                     <label for="googlefont"><span data-translate="googlefont">&gt; Specify a Google Font name</span></label>
                                 </div>
 								<div>
-									<i>note: You can find more fonts <a href="https://socialstream.ninja/fonts.html" target="_blank" class="lightblue">here</a></i>
+									<i>note: Install custom fonts on your system (Windows: right-click .ttf/.otf &rarr; Install, then restart browser). <a href="https://socialstream.ninja/fonts.html" target="_blank" class="lightblue">Font detector &amp; help</a></i>
 								</div>
                             </div>
                         </div>
@@ -7728,7 +7728,7 @@ <h3><span data-translate="display-options">Display Options</span></h3>
 									<label for="googlefont17"><span data-translate="googlefont">&gt; Specify a Google Font name</span></label>
 								</div>
 								<div>
-									<i>note: You can find more fonts <a href="https://socialstream.ninja/fonts.html" target="_blank" class="lightblue">here</a></i>
+									<i>note: Install custom fonts on your system (Windows: right-click .ttf/.otf &rarr; Install, then restart browser). <a href="https://socialstream.ninja/fonts.html" target="_blank" class="lightblue">Font detector &amp; help</a></i>
 								</div>
 								<div>
 									<h3>Event cheat sheet:</h3>
@@ -7974,7 +7974,7 @@ <h3><span data-translate="other-customization-options">Other customization optio
                                     <label for="googlefont4"><span data-translate="googlefont">&gt; Specify a Google Font name</span></label>
                                 </div>
 								<div>
-									<i>note: You can find more fonts <a href="https://socialstream.ninja/fonts.html" target="_blank" class="lightblue">here</a></i>
+									<i>note: Install custom fonts on your system (Windows: right-click .ttf/.otf &rarr; Install, then restart browser). <a href="https://socialstream.ninja/fonts.html" target="_blank" class="lightblue">Font detector &amp; help</a></i>
 								</div>
 								<h3><span data-translate="source-combination-options">Source Combination Options</span></h3>
 								<div>
@@ -8305,7 +8305,7 @@ <h3><span data-translate="other-customization-options">Other customization optio
                                     <label for="googlefont5"><span data-translate="googlefont">&gt; Specify a Google Font name</span></label>
                                 </div>
 								<div>
-									<i>note: You can find more fonts <a href="https://socialstream.ninja/fonts.html" target="_blank" class="lightblue">here</a></i>
+									<i>note: Install custom fonts on your system (Windows: right-click .ttf/.otf &rarr; Install, then restart browser). <a href="https://socialstream.ninja/fonts.html" target="_blank" class="lightblue">Font detector &amp; help</a></i>
 								</div>
 
                             </div>
@@ -8669,7 +8669,7 @@ <h3><span data-translate="other-customization-options">Other customization optio
 									<label for="googlefont13"><span data-translate="googlefont">&gt; Specify a Google Font name</span></label>
 								</div>
 								<div>
-									<i>note: You can find more fonts <a href="https://socialstream.ninja/fonts.html" target="_blank" class="lightblue">here</a></i>
+									<i>note: Install custom fonts on your system (Windows: right-click .ttf/.otf &rarr; Install, then restart browser). <a href="https://socialstream.ninja/fonts.html" target="_blank" class="lightblue">Font detector &amp; help</a></i>
 								</div>
 								<br>
 								<div>
@@ -9079,7 +9079,7 @@ <h3><span data-translate="theme-and-styling">Theme and Styling</span></h3>
 									<label for="googlefont20"><span data-translate="googlefont">&gt; Specify a Google Font name</span></label>
 								</div>
 								<div>
-									<i>note: You can find more fonts <a href="https://socialstream.ninja/fonts.html" target="_blank" class="lightblue">here</a></i>
+									<i>note: Install custom fonts on your system (Windows: right-click .ttf/.otf &rarr; Install, then restart browser). <a href="https://socialstream.ninja/fonts.html" target="_blank" class="lightblue">Font detector &amp; help</a></i>
 								</div>
 								<br>
 
@@ -9794,7 +9794,7 @@ <h3><span data-translate="other-customization-options">Other customization optio
                                     <label for="googlefont6"><span data-translate="googlefont">&gt; Specify a Google Font name</span></label>
                                 </div>
 								<div>
-									<i>note: You can find more fonts <a href="https://socialstream.ninja/fonts.html" target="_blank" class="lightblue">here</a></i>
+									<i>note: Install custom fonts on your system (Windows: right-click .ttf/.otf &rarr; Install, then restart browser). <a href="https://socialstream.ninja/fonts.html" target="_blank" class="lightblue">Font detector &amp; help</a></i>
 								</div>
 
 								<div style="padding: 12px; border-radius: 8px; background: rgba(0,0,0,0.04); margin-bottom: 15px;">
@@ -9917,7 +9917,7 @@ <h3><span data-translate="other-customization-options">Other customization optio
                                     <label for="googlefont7"><span data-translate="googlefont">&gt; Specify a Google Font name</span></label>
                                 </div>
 								<div>
-									<i>note: You can find more fonts <a href="https://socialstream.ninja/fonts.html" target="_blank" class="lightblue">here</a></i>
+									<i>note: Install custom fonts on your system (Windows: right-click .ttf/.otf &rarr; Install, then restart browser). <a href="https://socialstream.ninja/fonts.html" target="_blank" class="lightblue">Font detector &amp; help</a></i>
 								</div>
 								<br>
 								<div>

popup.js

@@ -780,7 +780,18 @@ function isFontAvailable(fontName) {
 }
 
 async function populateFontDropdown() {
-    const fonts = ["Roboto", "Tahoma",  "Arial", "Verdana", "Helvetica", "Serif", "Trebuchet MS", "Times New Roman", "Georgia", "Garamond", "Courier New", "Brush Script MT"];
+    const fonts = [
+        // Windows core UI/text
+        'Segoe UI', 'Segoe UI Variable', 'Segoe UI Emoji', 'Segoe UI Historic', 'Segoe UI Symbol', 'Bahnschrift', 'Ebrima', 'Gadugi', 'Javanese Text', 'Leelawadee UI', 'Lucida Sans Unicode', 'Malgun Gothic', 'Meiryo', 'Microsoft Himalaya', 'Microsoft JhengHei', 'Microsoft New Tai Lue', 'Microsoft PhagsPa', 'Microsoft Sans Serif', 'Microsoft Tai Le', 'Microsoft Uighur', 'Microsoft YaHei', 'Microsoft Yi Baiti', 'MingLiU-ExtB', 'Mongolian Baiti', 'MS Gothic', 'MS PGothic', 'MS UI Gothic', 'NSimSun', 'PMingLiU-ExtB', 'SimSun', 'SimSun-ExtB', 'Yu Gothic', 'Yu Gothic UI',
+        // Windows Latin staples
+        'Arial', 'Arial Black', 'Calibri', 'Cambria', 'Candara', 'Comic Sans MS', 'Consolas', 'Constantia', 'Corbel', 'Courier New', 'Franklin Gothic Medium', 'Gabriola', 'Georgia', 'Impact', 'Palatino Linotype', 'Tahoma', 'Times New Roman', 'Trebuchet MS', 'Verdana', 'Symbol', 'Webdings', 'Wingdings', 'Wingdings 2', 'Wingdings 3', 'Sitka Banner', 'Sitka Display', 'Sitka Heading', 'Sitka Small', 'Sitka Subheading', 'Sitka Text', 'Lucida Console',
+        // Developer favorites / code
+        'Cascadia Code', 'Cascadia Mono', 'Fira Code', 'Fira Mono', 'JetBrains Mono', 'Source Code Pro', 'IBM Plex Mono', 'Ubuntu Mono', 'Inconsolata', 'Monaspace Neon', 'Monaspace Argon',
+        // Popular sans/serif families
+        'Inter', 'Roboto', 'Open Sans', 'Noto Sans', 'Noto Serif', 'Noto Sans JP', 'Noto Sans KR', 'Noto Sans SC', 'Noto Serif JP', 'Noto Naskh Arabic', 'Lato', 'Montserrat', 'Poppins', 'Oswald', 'Raleway', 'Nunito', 'Merriweather', 'Playfair Display', 'PT Sans', 'PT Serif', 'Source Sans 3', 'Source Serif 4', 'Source Sans Pro', 'Source Serif Pro', 'IBM Plex Sans', 'IBM Plex Serif', 'Ubuntu', 'Work Sans', 'Sora', 'Avenir', 'Avenir Next', 'SF Pro Text', 'SF Pro Display', 'Helvetica Neue', 'Helvetica', 'Gill Sans',
+        // Other common
+        'Book Antiqua', 'Century Gothic', 'Garamond', 'Didot', 'Bodoni MT', 'Perpetua', 'Rockwell', 'Goudy Old Style', 'Copperplate', 'Brush Script MT'
+    ];
 
     var select = document.querySelector("[data-optionparam1='font']");
     fonts.forEach(font => {