Review comments

Co-authored-by: Copilot <copilot@github.com>

src/network/html/FontsPage.html

@@ -181,22 +181,44 @@
         const res = await fetch('/api/fonts');
         const data = await res.json();
         const el = document.getElementById('families');
+        el.innerHTML = '';
         if (!data.families || data.families.length === 0) {
-          el.innerHTML = '<p class="empty">No fonts installed</p>';
+          const p = document.createElement('p');
+          p.className = 'empty';
+          p.textContent = 'No fonts installed';
+          el.appendChild(p);
           return;
         }
-        el.innerHTML = data.families.map(f => `
-          <div class="family">
-            <div class="family-info">
-              <h3>${f.name}</h3>
-              <span class="family-meta">
-                ${f.sizes.join(', ')}pt &middot;
-                ${f.files.map(fi => formatSize(fi.size)).join(' + ')}
-              </span>
-            </div>
-            <button class="btn btn-danger" data-family="${f.name}">Delete</button>
-          </div>
-        `).join('');
+
+        data.families.forEach(f => {
+          const familyRow = document.createElement('div');
+          familyRow.className = 'family';
+
+          const info = document.createElement('div');
+          info.className = 'family-info';
+
+          const title = document.createElement('h3');
+          title.textContent = f.name;
+
+          const meta = document.createElement('span');
+          meta.className = 'family-meta';
+          const sizes = Array.isArray(f.sizes) ? f.sizes.join(', ') : '';
+          const fileSizes = Array.isArray(f.files) ? f.files.map(fi => formatSize(fi.size)).join(' + ') : '';
+          meta.textContent = sizes + 'pt - ' + fileSizes;
+
+          info.appendChild(title);
+          info.appendChild(meta);
+
+          const delBtn = document.createElement('button');
+          delBtn.className = 'btn btn-danger';
+          delBtn.dataset.family = f.name;
+          delBtn.textContent = 'Delete';
+
+          familyRow.appendChild(info);
+          familyRow.appendChild(delBtn);
+          el.appendChild(familyRow);
+        });
+
         el.querySelectorAll('button[data-family]').forEach(btn => {
           btn.addEventListener('click', () => deleteFamily(btn.dataset.family));
         });
@@ -272,7 +294,16 @@
         return;
       }
 
-      const family = sanitizeFamily(familyFromFilename(files[0].name));
+      const families = files.map(f => sanitizeFamily(familyFromFilename(f.name)));
+      const uniqueFamilies = new Set(families);
+      if (uniqueFamilies.size !== 1) {
+        status.className = 'status-err';
+        status.style.display = 'block';
+        status.textContent = 'Selected files belong to multiple families.';
+        return;
+      }
+
+      const family = families[0];
 
       status.className = '';
       status.style.display = 'block';