Choose a font in Settings, beside the theme (#359)

Kept as the theme is, in a cookie each browser its own, and put on the
page by boot.js before the first frame. Theme's own, the default, adds
no rule, so Modern's Inter, Classic's Lucida Grande and Glass's system
face are as they were. The others are on the device already or served
by ipx (Inter), so choosing one downloads nothing. Their rules are
last in app.css, where they tie with each theme's own body font and win.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

web/src/dialogs.ts

@@ -448,6 +448,9 @@ async function prefsModal(){
       <select id="smode">${Object.entries(MODES).map(([k,t])=>
         `<option value="${k}"${theme.mode===k?' selected':''}>${esc(t)}</option>`).join('')}</select>
       <span class="hint">Auto follows your system's light/dark setting.</span></div>
+    <div class="field"><label for="sfont">Font</label>
+      <select id="sfont">${Object.entries(FONTS).map(([k,t])=>
+        `<option value="${k}"${font===k?' selected':''}>${esc(t)}</option>`).join('')}</select></div>
     <div class="field"><label>DeadAir</label>
       <span class="hint" id="sdeadsaved">${deadSavedText(S.me)}</span></div>
     <div class="field"><label>Subscriptions</label>
@@ -488,6 +491,7 @@ async function prefsModal(){
     <div class="field"><span class="hint" id="sversion">${S.me?`iPX ${esc(S.me.version)}, page __WEB_VERSION__`:''}</span></div>`);
   $<HTMLSelectElement>('#stheme').onchange=(e: Event)=>setTheme((e.target as HTMLSelectElement).value,undefined,true);
   $<HTMLSelectElement>('#smode').onchange=(e: Event)=>setTheme(undefined,(e.target as HTMLSelectElement).value,true);
+  $<HTMLSelectElement>('#sfont').onchange=(e: Event)=>setFont((e.target as HTMLSelectElement).value,true);
   $<HTMLButtonElement>('#gopml').onclick=opmlModal;
   drawTokens();
   $<HTMLButtonElement>('#tokadd').onclick=async()=>{